canvas的api：
W3C的canvas版本:https://www.w3.org/TR/2dcontext/
WHATWG的canvas版本：https://html.spec.whatwg.org/
canvas中的clip()函数可以裁剪区域，但设定好裁剪区域后，裁剪区域内容的内容显示，裁剪区域外的内容将不显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>clip裁剪</title>
</head>
<body>
<canvas id="ctx"></canvas>
<script>
var context=document.getElementById("ctx");
var ctx= context.getContext("2d");
context.width=600;
context.height=600;
context.style.border="1px solid red";
ctx.beginPath();
ctx.arc(290,290,100,0,Math.PI*2);//设置裁剪区域
ctx.clip(); //裁剪
ctx.beginPath();
ctx.fillStyle="#ff0"
ctx.fillRect(10,10,580,580);
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>clip裁剪</title>
</head>
<body>
<canvas id="ctx"></canvas>
<script>
var context=document.getElementById("ctx");
var ctx= context.getContext("2d");
context.width=600;
context.height=600;
context.style.border="1px solid red";
ctx.beginPath();
ctx.fillStyle="#ff0"
ctx.fillRect(10,10,580,580);
ctx.beginPath();
ctx.arc(290,290,100,0,Math.PI*2);//裁剪圆形区域，若其他图形，可以使用fillRect()，bezierCourveTo()等
ctx.fillStyle="green";//设置裁剪区域颜色
ctx.fill()//填充裁剪区域
ctx.clip(); //裁剪
</script>
</body>
</html>
image.png
下面是用clip()制作的简单动图代码效果图：
Honeycam 2019-05-29 22-11-21.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>clip裁剪</title>
</head>
<body>
<canvas id="ctx"></canvas>
<script>
var context=document.getElementById("ctx");
var ctx= context.getContext("2d");
context.width=600;
context.height=600;
context.style.border="1px solid red";
let count=0;//计数
let dig=Math.PI/20;
var imgs=new Image();
imgs.src="./img/fox.jpeg";
imgs.onload=function(){
// 指定每隔0.15秒调用一次addRadial函数
setInterval("addRadial();" , 150);
}
var addRadial= function(){
ctx.save();//保存当前绘图状态
ctx.beginPath();//开始创建路径
console.log('dig==',dig)
ctx.arc(350,350,200,0, dig * --count ,true);
ctx.lineTo(350,350);
ctx.closePath();//关闭路径
ctx.clip();
ctx.drawImage(imgs,120,120);
ctx.restore();
}
</script>
</body>
</html>
网友评论