html5的应用-图像裁剪效果图

百变鹏仔 2个月前 (10-18) #H5教程

文章标签效果图

图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲

效果截图：

代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><script>    // 图像裁剪：context.clip()    // context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候    // 先创建裁剪区域    // 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）    // 给出圆形和星形的裁剪代码     function createCircleClip(context) {        context.beginPath();        context.arc(200, 170, 100, 0, Math.PI * 2, true);        context.closePath();        context.clip();    }    function create5StarClip(context) {        var n = 0;        var dx = 200;        var dy = 150;        var s = 150;        context.beginPath();        var x = Math.sin(0);        var y = Math.cos(0);        var dig = Math.PI / 5 * 4;        for (var i = 0; i < 5; i++) {           var x = Math.sin(i * dig);           var y = Math.cos(i * dig);           context.lineTo(dx + x * s, dy + y * s);        }        context.closePath();        context.clip();    } function draw() {        var canvas = document.getElementById("mycanvas");        if (canvas == null)         return false;        var context = canvas.getContext("2d");        context.fillStyle = "black";        context.fillRect(0, 0, 400, 300);        image = new Image();        image.src = "Image/html5.jpg"        image.onload = function () {            //圆形裁剪区            //createCircleClip(context)            //星形裁剪区            create5StarClip(context);            context.drawImage(image,0,0);        }        } 		window.onload=draw;</script></head><body>  <p id="p1"></p>  <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas></body></html>

文章推荐

html5的应用-图像裁剪效果图

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集