canvas动画--一个会移动的饭团

我本要画一个粽子，祝贺我师傅端午节快乐。无奈画出一个四不像，改为画一个emoji的饭团，同时要求会动。

饭团的形状由2次贝塞尔曲线组成，饭团中间的紫菜我用一个黑色填充矩形代替，加了阴影，如下图。

首先我定义了一个height为400，width为500的画布，为了清除看见画布区域，加了边框。<canvas id="canvas" width="500" height="400" style="border: 1px solid"></canvas><div id="ds"></div>然后定义两个按钮，分别是“开始”、“暂停”，用作操控动画。点击开始时，会触发名为cvs的定时器，同时调用fff（）函数，函数每70ms再调用一次。点击暂停清除cvs定时器。

<button onclick="cvs=setInterval(fff,70);">开始</button><button onclick="clearInterval(cvs);" >暂停</button>

一开始画这个饭团，由于脑子太死，硬是以三个角为开始、结束点，所以会导致边角是尖的，很生硬。后来换了一种画法，以每条边的中点为开始结束点，角画出来就会比较圆滑自然。这都是我在画图的过程中遇到的一些小问题，在此记录积累经验。

下面说一下，fff()这个函数。<script type="text/javascript">

dir是一个储存移动距离的变量，一开始我设为100了，直接从中间开始下移，师傅给我改成0，便从靠上的位置开始下移。

exp是像素移动的位置，超过设定的长宽后反转。

    var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var dir = 0;var height = 1000;var width = 1000;var exp = 1;

设置好shadow四个值，stroke的颜色，便可以开始画二次贝塞尔曲线构成一个饭团，在起始坐标的y轴和三条曲线的控制点y轴、终点y轴上加上dir变量，这样就可以向下移动了。

    function fff() {ctx.restore();ctx.clearRect(0,0,height,width);//清除上一次的痕迹//set the shadowctx.shadowOffsetX=-3;ctx.shadowOffsetY=-3;ctx.shadowBlur=9;ctx.shadowColor="rgba(0,0,0,0.5)";//draw the quadraticctx.strokeStyle="gary";ctx.beginPath();ctx.moveTo(200,100+dir);ctx.quadraticCurveTo(250,10 + dir,300,100 + dir);//1ctx.quadraticCurveTo(350,200 + dir,250,200 + dir);//2ctx.quadraticCurveTo(150,200 + dir,200,100 + dir);//3ctx.stroke();//ctx.globalCompositeOperation="destination-in";ctx.save();

此处在两个图形之间用了clip()，特别说明的是，我没搞清楚clip()的用法，以为拿来剪切就可以用了！没有在clip()之前保存当前画布区域，所以在移动的时候出现问题。

*ps：clip()方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。ctx.clip();ctx.fillStyle="black";ctx.fillRect(220, 150 + dir,60,50);

dir = dir + exp;if(dir==0||dir==height){exp = exp *( -1);}}</script>

此处提供本次canvas动画的源代码：点击 github完整代码