HTML5 canvas 制作动画原理

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：

每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

以下为简单的绕某一中心点进行旋转的动画代码，注意加红的三行代码，加上第三行是绕图片本身的中心进行旋转，不加则是绕指定的一点旋转：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="content-type" content="text/html:charset=utf-8">    <title>Smile To Us</title></head></head><body><div>    <canvas id="smileCanvas" width="10000" height="10000">Your browser doesn't support the "Canvas" tag~</canvas></div><script type="text/javascript" >var sc = document.getElementById("smileCanvas");var ctx0 = sc.getContext("2d");var i = 1;function drawSmile() {

if (i<10){i=i+0.2;        }else {i=(i%10)+0.2;        }ctx0.clearRect(0, 0, 1000,1000);var now = new Date();var secd = now.getSeconds();var min = now.getMinutes();var hour = now.getHours();//小时必须获取浮点类型（小时+分数转化的小时）        //时间格式19:23:30        //将24小时进制装换为12小时进制hour = hour + (min / 60);hour = hour > 12 ? hour - 12 : hour;//绘制脸蛋ctx0.save();ctx0.fillStyle = "#ffff09";ctx0.translate(800, 450);//图片在界面上的位置坐标ctx0.rotate( secd*10*Math.PI / 180);ctx0.translate(-500,-200);//该图片中心点的坐标的相反数ctx0.beginPath();ctx0.arc(500, 200, 100*i, 0, Math.PI * 2, true);ctx0.closePath();ctx0.fill();ctx0.restore();

//绘制眼睛ctx0.save();ctx0.beginPath();ctx0.fillStyle = "#1d1815";ctx0.translate(800, 450);ctx0.rotate(secd*10* Math.PI / 180);ctx0.translate(-500,-200);ctx0.arc(545, 160, 20*i, 0, Math.PI * 2, true);ctx0.closePath();ctx0.fill();ctx0.beginPath();ctx0.arc(450, 160, 20*i, 0, Math.PI * 2, true);ctx0.closePath();ctx0.fill();ctx0.restore();

//绘制嘴巴ctx0.save();ctx0.beginPath();ctx0.fillStyle = "#f97d59";ctx0.strokeStyle = "#1d1815";ctx0.translate(800, 450);ctx0.rotate(secd*10*Math.PI / 180);ctx0.translate(-500,-200);var x = 500;               // x 坐标值var y = 220;               // y 坐标值var radius = 60*i;                    // 圆弧半径var startAngle = 60;                     // 开始点var endAngle = 220; // 结束点var anticlockwise = 3.5 % 2 == 0 ? false : true; // 顺时针或逆时针ctx0.arc(500, y, radius, startAngle, endAngle, anticlockwise);ctx0.fill();ctx0.stroke();ctx0.restore();    }

setInterval(drawSmile, 1000);drawSmile();</script></body></html>

HTML5 canvas 制作动画原理相关推荐

html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
canvas 制作动画（上）
canvas 制作动画(上) canvas 制作动画(上) 1. 画布中的动画 2. 创建动画循环 2.1 循环 2.2 更新.清除.绘制 3. 记忆要绘制的形状 3.1 错误的方法 3.2 正确的方 ...
canvas 制作动画（下）
canvas 制作动画(下) 1. 改变方向在 canvas 制作动画(上)已经介绍了如何创建动画,但还没有讨论如何控制形状动画的方式.我觉得只有直线动画会让人觉得很枯燥,不知你是否也这样想. 你已 ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html5绘制菱形,HTML5 canvas 菱形动画齿轮 - 开源中国
原创. 通过 HTML5 canvas 创造由18个菱形构成的齿轮,并产生动画效果. An animation is made of the wheel consisting 18 diamends. ...

HTML5 canvas 制作动画原理

HTML5 canvas 制作动画原理相关推荐

最新文章

热门文章