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 οnclick="cvs=setInterval(fff,70);">开始</button>
<button οnclick="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 shadow
        ctx.shadowOffsetX=-3;ctx.shadowOffsetY=-3;ctx.shadowBlur=9;ctx.shadowColor="rgba(0,0,0,0.5)";//draw the quadratic
        ctx.strokeStyle="gary";ctx.beginPath();ctx.moveTo(200,100+dir);ctx.quadraticCurveTo(250,10 + dir,300,100 + dir);//1
        ctx.quadraticCurveTo(350,200 + dir,250,200 + dir);//2
        ctx.quadraticCurveTo(150,200 + dir,200,100 + dir);//3
        ctx.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完整代码

canvas动画--一个会移动的饭团相关推荐

制作一个简单的canvas动画
制作一个简单的canvas动画作者:旺仔一上来先话不多说上代码,代码能看的懂得,ok,就当我下面所有的内容为废话,代码看的不太懂的,没关系我会一点一点让你懂,不过前提是你有一定的html+css+ ...
canvas动画3：交互
canvas动画3 时隔很久,本人终于又写博客了(重度拖延症),把之前留下的canvas交互动画讲一讲. 电脑上的交互,指的是鼠标和键盘,我们今天主要用的是鼠标. 既然是鼠标的话,就要获取鼠标的各种事 ...
构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
感谢谢帅shawn分享的canvas动画框架,我再来分一次 //动画框架 http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5% ...
canvas动画简单操作
canvas动画小球滚动效果关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setIntervalvar x = 20; var s ...
《每周一点canvas动画》——圆周运动
接<每周一点canvas动画>--波形运动圆周运动可以分为两种基本的形式:正圆运动和椭圆运动. 在讲解圆周运动之前,必不可少的数学公式即将袭来.so,各位骚年们,请护好自己的膝盖.听不懂 ...
7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
canvas动画:黑客帝国_使用Canvas API进行动画处理-第3部分：重力和动态渲染
canvas动画:黑客帝国 Over in Part 2 of this series we created a ball that would ricochet around the screen ...
canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
canvas动画时钟动画太阳系动画动态蚂蚁线全景照片
canvas给我们提供了绘图API,这些API基于JavaScript实现,那么我们可以方便的实现一些动画,在这里我们将展示几个经典的动画绘制技巧,包括:时钟,太阳系,动态蚂蚁线,全景照片动画绘制的 ...

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

canvas动画--一个会移动的饭团相关推荐

最新文章

热门文章