Javascript 使用画布设置剪切遮罩的动画

---

请参阅所附图片。你可以看到第一张幻灯片，用画布遮罩来制作动画，就像第二张幻灯片一样。

我不知道你想要什么语言，所以是Javascript，但无论你使用什么SDK或语言，原理都是一样的

容易做。使用

requestAnimationFrame

使其平滑。创建一组形状，您可以从中设置每个形状的动画，并使用moveTo、lineTo或所需的任何路径函数将它们作为普通图形绘制到画布上下文中。不要调用fill或stroke call

ctx.clip（）

然后绘制图像，它将只显示在剪裁区域中

下面是一个相当混乱的例子，但它将为您提供基础知识，您可以改进它以满足您的需要

var canvas=document.getElementById（“canV”）；//拿画布
var ctx=canvas.getContext（“2d”）；//了解上下文
变量blobs=[]；//用于容纳水滴的数组
var width=canvas.width；
var height=canvas.height；
变量blobPCount=16；//这些斑点多凹凸不平啊
var wobbla=0；//增加了一点抖动
变量增长速度=2；//增长速度0.1非常慢10兆快
var cludgeFactor=0.25；//过去常常计算出一切都完成了
var cludgeFactorA=1-cludgeFactor；//这是一个有点模糊的名字
//维基共享图像
var imageURL=”https://upload.wikimedia.org/wikipedia/commons/e/ee/Baby_Cuttlefish2_%285589806913%29.jpg";
var image=new image（）；//创建图像
image.src=imageURL；//加载它
var done=false；//完成时标志为true
函数addBlob（）{//添加一个blob
var b={}；
b、 x=Math.random（）*width；//为它找到一个随机位置
b、 y=数学随机（）*高度；
b、 points=[]；//在一个向外生长的圆中创建一组pointy
对于（var i=0；iwidth*cludgeFactor&&xheight*cludgeFactor&&y

.canC{
宽度：500px；
高度：400px；
}

---

我不知道您想要什么语言，所以它是Javascript，但无论您使用什么SDK或语言，原则都是一样的

容易做。使用

requestAnimationFrame

使其平滑。创建一组形状，您可以从中设置每个形状的动画，并使用moveTo、lineTo或所需的任何路径函数将它们作为普通图形绘制到画布上下文中。不要调用fill或stroke call

ctx.clip（）

然后绘制图像，它将只显示在剪裁区域中

下面是一个相当混乱的例子，但它将为您提供基础知识，您可以改进它以满足您的需要

var canvas=document.getElementById（“canV”）；//拿画布
var ctx=canvas.getContext（“2d”）；//了解上下文
变量blobs=[]；//排列