动画裁剪程序-HTML5 Canvas

来源：互联网发布：windows文件系统类型编辑：程序博客网时间：2024/05/24 06:32

CanvasRenderingContext2D提供了一个clip()方法，这个方法会把Canvas的当前路径裁剪下来，一旦调用了CanvasRenderingContext2D对象的clip()方法之后，接下来向Canvas绘制图形时，只有被clip()裁剪的路径覆盖的部分才会被显示出来。

示例代码(下例所用图片尺寸为800x800)：

<!DOCTYPE html><html><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>    <title>HtmlTest</title></head><body><h2>位图裁剪</h2><canvas id="mc" width="850" height="850" style="border:1px solid black;"></canvas><script type="text/javascript">    var canvas=document.getElementById('mc');    var ctx=canvas.getContext('2d');    var dig=Math.PI/20;    var count=0;    var image=new Image();    image.src="sc.jpg";    image.onload=function(){        setInterval("addRadial();",25);    }    var addRadial=function(){        ctx.save();        ctx.beginPath();        ctx.arc(425,425,400,0,dig*++count,false);        ctx.lineTo(425,425);        ctx.closePath();        ctx.clip();        ctx.drawImage(image,25,25);        ctx.restore();    }</script></body></html>

0 0