HTML5 Canvas 逐帧动画的实现
使用Canvas进行前端图形绘制与动画效果
使用Canvas进行前端图形绘制与动画效果在现代互联网时代，前端开发者常常需要使用图形绘制和动画效果来提升用户体验。
其中，Canvas成为一个强大而灵活的工具，提供了丰富的绘制和动画功能。
本文将介绍如何使用Canvas进行前端图形绘制与动画效果。
一、了解Canvas基础知识Canvas是HTML5中新增的元素，它可以用来绘制图形、动画、图像等。
在使用Canvas前，需要先了解一些基础概念。
1. Canvas的使用方式Canvas可以通过在HTML中添加一个<canvas>标签来创建，通过JavaScript脚本来进行绘制和操作。
2. 绘制上下文在使用Canvas之前，需要获取到Canvas的2D上下文（context）。
通过调用Canvas元素的getContext()函数，并传入参数"2d"即可获得2D上下文。
使用上下文对象，可以进行图形绘制、样式设置等操作。
3. Canvas坐标系Canvas使用一个坐标系来定位绘制的图形。
坐标系的原点位于Canvas的左上角，横轴向右为正，纵轴向下为正。
二、绘制基本图形在Canvas中，可以绘制各种基本图形，例如矩形、圆形、直线、路径等。
下面以绘制矩形和圆形为例进行介绍。
1. 绘制矩形要在Canvas中绘制矩形，可以使用context的rect()函数来定义矩形的位置和大小，并使用fill()或stroke()函数来填充或描边矩形。
2. 绘制圆形要在Canvas中绘制圆形，可以使用context的arc()函数来定义圆形的位置、半径和起始、终止角度，再使用fill()或stroke()函数来填充或描边圆形。
三、绘制复杂图形与路径在Canvas中，可以通过路径的方式绘制出更加复杂的图形。
路径的绘制过程分为创建路径、绘制路径和闭合路径三个步骤。
1. 创建路径创建路径是通过调用context的beginPath()函数来开始路径的绘制。
canvas动画的实现原理
canvas动画的实现原理
Canvas动画的实现原理是清屏、更新、渲染。
在制作Canvas动画时，一般会使用两种方式，一种是使用setInterval或者setTimeout方法，另一种是调用requestAnimationFrame方法。
setInterval和setTimeout方法都是按照设定的时间间隔反复执行某段代码，但是它们不会自动取消，需要手动设置时间间隔。
requestAnimationFrame方法不需要设置时间间隔，而是直接将处理逻辑写入参数的回调函数中，且它自身需要被放到回调函数中，它的启动操作可以用cancelAnimationFrame方法来取消。
常用的绘制方法
canvas上绘制内容是要在js脚本执行结束之后才能看到结果，所以我们不能在for循环中完成动画的绘制，而是常用一些浏览器内置的方法：
1.setTimeout(code, milliseconds, param1, param2, ...); ：延时器，不多讲；
2.setInterval(function, milliseconds, param1, param2, ...); ：定时器，不多讲；
3.window.requestAnimationFrame(callback) ：告诉浏览器你希望执行一个动
画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
使用Canvas绘制动画效果的方法
使用Canvas绘制动画效果的方法在现代互联网时代，动画已经成为网页设计中重要的一环。
而使用Canvas绘制动画效果已经成为设计师必备技能之一。
本文将介绍一些使用Canvas绘制动画效果的方法，希望能够对读者有所帮助。
一、了解Canvas首先，我们需要了解Canvas是什么。
Canvas是HTML5中新增的一个元素，它允许我们通过使用JavaScript在网页上绘制图形。
使用Canvas绘制动画效果需要掌握一些基础知识，比如Canvas的属性、方法和事件等。
了解这些知识将为我们绘制动画效果提供基础。
二、使用requestAnimationFrame方法在绘制动画效果时，我们通常会使用requestAnimationFrame方法。
这个方法可以在浏览器重绘之前调用我们指定的函数，从而实现平滑的动画效果。
我们可以通过不断地调用requestAnimationFrame方法，来实现连续的绘制，从而呈现出动画效果。
三、绘制基本图形在绘制动画效果之前，我们需要学会如何在Canvas上绘制基本图形，比如矩形、圆形和线条等。
通过改变它们的样式和位置，我们可以实现一些简单的动画效果。
例如，我们可以通过改变矩形的位置和颜色，来实现一个矩形移动并改变颜色的动画效果。
四、使用缓动函数缓动函数可以用来实现更加流畅的动画效果。
它们可以让动画的速度和变化更加逼真，从而增强用户体验。
在使用Canvas绘制动画效果时，我们可以借助一些已有的缓动函数库，比如Tween.js和Easing.js等。
这些库提供了各种各样的缓动函数，我们可以根据需求选择合适的函数，使得动画效果更加出色。
五、处理用户交互在绘制动画效果时，我们通常需要处理用户的交互行为，比如鼠标点击和拖动等。
通过监听Canvas上的事件，我们可以捕获用户的交互行为，并作出相应的动画效果。
例如，我们可以通过监听鼠标点击事件，来实现一个点击产生涟漪效果的动画。
六、优化性能在使用Canvas绘制动画效果时，我们需要注意性能问题。
网页中基于HTML5 canvas的动画实现
设计制作数码世界 P .135网页中基于HTML5 canvas 的动画实现龚丽 武汉软件工程职业学院摘要：canvas 是HTML5新增的一个非常重要的元素，通过这个元素，我们可以在网页上创建画布，并在画布上绘制任意图形或图像。
canvas 还有一个特性就是可以在其内部创建动画，通过设置时间循环，让图形或图像动起来。
关键词：HTML5 canvas 元素 绘制图形 drawImage() setInterval()引言对于HTML4来说，在网页中绘制图形或运行动画，其能力是非常有限的。
HTML5则提供了本地绘图API，开发人员可以通过HTML5的canvas 元素并使用javascript 绘制形状、图形，实现在web 页面上创建动画，甚至游戏，而这些并不需要使用其他语言（例如SVG）或依赖外部插件（如Flash）。
当我们在页面上放置一个canvas 元素，就相当于在页面上创建了一个矩形绘图区。
canvas 元素自身并没有绘图能力，所有图形绘制及动画都是通过javascript 语言编程来实现，HTML5为图形绘制提供了一系列2D 绘图API。
1 基本图形绘制在网页中绘制基本图形，需要经过以下3个步骤：(1) 在HTML 页面文档中放置一个canvas 元素，相当于创建了一个矩形绘图区域，并设置canvas 元素的id。
(2) 使用javascript 编写绘图脚本，通过id 找到canvas 元素，并获取该元素的上下文环境对象，一般将环境对象设为二维，即把字符串“2d”传入getContent()方法中。
(3) 通过绘图API 在页面中绘制各种图形。
下面我们举例来看矩形、圆形的绘制编程。
首先，在HTML 文档中放置<canvas>元素，<canvas>元素本身是不包含宽度、高度及内容，也不会在屏幕上有任何显示，所以大部分情况下在创建时注明宽度及高度，并设置id。
在浏览器运行结果如下图1。
如何使用JavaScript实现Canvas绘图和动画
如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。
在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。
一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。
Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。
在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。
二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。
在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。
在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。
三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。
Canvas提供了一系列的API可以用于绘制图形。
使用Canvas绘制动画效果的技术指南
使用Canvas绘制动画效果的技术指南Canvas是HTML5中提供的绘图API，它可以让开发者在网页上动态地绘制图形、动画和游戏等效果。
通过Canvas，我们可以创造出令人惊艳的视觉效果，为用户带来更好的体验。
本文将为你介绍使用Canvas绘制动画效果的技术指南，帮助你更好地利用Canvas进行动画开发。
1. 熟悉Canvas的基本操作在使用Canvas绘制动画之前，我们需要先熟悉Canvas的基本操作。
Canvas是一个HTML元素，我们可以通过JS获取到它，并在其上进行绘制。
通过getContext("2d")方法，我们可以获取到一个CanvasRenderingContext2D对象，通过这个对象我们可以进行各种绘制操作，比如绘制图形、填充颜色、设置字体等。
2. 确定动画的目标和效果在开始编写动画代码之前，我们首先需要明确动画的目标和效果。
比如，我们可能想要绘制一个小球在画布上移动，或者通过一系列图形的变化来表示一个过程。
在明确了动画的目标后，我们可以更有针对性地编写代码。
3. 使用requestAnimationFrame方法为了实现流畅的动画效果，我们应该使用requestAnimationFrame方法来代替传统的setTimeout或setInterval。
requestAnimationFrame方法可以确保动画在浏览器的刷新频率下执行，从而避免了掉帧现象，更好地保证动画的流畅性。
4. 利用Canvas的绘图功能Canvas提供了各种绘图功能，我们可以通过这些功能创造出丰富多样的动画效果。
比如，我们可以使用绘制路径的方法（如moveTo、lineTo等）来实现形状的变换，利用渐变和阴影效果来增加绘图的立体感，或者使用Canvas的图像处理功能来对图像进行处理。
5. 引入动画中的物理效果在一些动画中，我们可以引入物理效果来增加真实感。
比如，在一个小球移动的动画中，我们可以加入重力、摩擦力等效果，让小球移动更加自然。
Html5中的canvas详解
Canvas的初步了解<canvas id="tutorial" width="150" height="150"></canvas><canvas> 看起来和<img> 元素很相像，唯一的不同就是它并没有src 和alt 属性。
实际上，<canvas> 标签只有两个属性——width和height。
这些都是可选的，并且同样利用DOM properties 来设置。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。
该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。
id属性并不是<canvas>元素所特有的，而是每一个HTML元素都默认具有的属性（比如class 属性）。
给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。
<canvas>元素可以像任何一个普通的图像一样（有margin，border，background等等属性）被设计。
然而，这些样式不会影响在canvas中的实际图像。
我们将会在一个专门的章节里看到这是如何解决的。
当开始时没有为canvas规定样式规则，其将会完全透明。
<canvas>元素与<img>标签的不同之处在于，就像<video>，<audio>，或者<picture>元素一样，很容易定义一些替代内容。
由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。
HTML5实现动画效果的方式汇总
HTML5实现动画效果的⽅式汇总⼩编以⼀个运动的⼩车为例⼦，讲述了三种实现HTML5动画的⽅式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。
PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！分三种⽅式实现：(1) canvas元素结合JS(2) 纯粹的CSS3动画（暂不被所有主流浏览器⽀持，⽐如IE）(3) CSS3结合Jquery实现知道如何使⽤CSS3动画⽐知道如何使⽤<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，⽐如CSS)，⽽我们使⽤canvas⾃定义画出来的效果却不能被优化。
原因⼜在于，浏览器使⽤的硬件主要取决于显卡的能⼒。
⽬前，浏览器没有给予我们直接访问显卡的权⼒，⽐如，每⼀个绘画操作都不得不在浏览器中先调⽤某些函数。
1.canvashtml代码：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animation in HTML5 using the canvas element</title></head><body onload="init();"><canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas><div id="controls"><button type="button" onclick="speed(-0.1);">Slower</button><button type="button" onclick="play(this);">Play</button><button type="button" onclick="speed(+0.1)">Faster</button></div></body></html>js代码：定义⼀些变量：复制代码代码如下:var dx=5, //当前速率rate=1, //当前播放速度ani, //当前动画循环c, //画图(Canvas Context)w, //汽车[隐藏的](Canvas Context)grassHeight=130, //背景⾼度carAlpha=0, //轮胎的旋转⾓度carX=-400, //x轴⽅向上汽车的位置(将被改变)carY=300, //y轴⽅向上汽车的位置(将保持为常量)carWidth=400, //汽车的宽度carHeight=130, //汽车的⾼度tiresDelta=15, //从⼀个轮胎到最接近的汽车底盘的距离axisDelta=20, //汽车底部底盘的轴与轮胎的距离radius=60; //轮胎的半径为了实例化汽车canvas(初始时被隐藏)，我们使⽤下⾯的⾃执⾏的匿名函数复制代码代码如下:(function(){var car=document.createElement('canvas'); //创建元素car.height=carHeight+axisDelta+radius; //设置⾼度car.width=carWidth; //设置宽度w=car.getContext('2d');})();点击“Play”按钮，通过定时重复执⾏“画汽车”操作，来模拟“帧播放”功能：复制代码代码如下:function play(s){ //参数s是⼀个buttonif(ani){ //如果ani不为null，则代表我们当前已经有了⼀个动画clearInterval(ani); //所以我们需要清除它(停⽌动画)ani=null;s.innerHTML='Play'; //重命名该按钮为“播放”}else{ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为⼆⼗五分之⼀s.innerHTML='Pause'; //重命名该按钮为“暂停”}}加速，减速，通过以下⽅法，改变移动距离的⼤⼩来实现：复制代码代码如下:function speed(delta){var newRate=Math.max(rate+delta,0.1);dx=newRate/rate*dx;rate=newRate;}页⾯加载的初始化⽅法：//initfunction init(){c=document.getElementById('canvas').getContext('2d');drawCanvas();}主调⽅法：复制代码代码如下:function drawCanvas(){c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显⽰的)，避免产⽣错误c.save(); //保存当前坐标值以及状态，对应的类似“push”操作drawGrass(); //画背景c.translate(carX,0); //移动起点坐标drawCar(); //画汽车(隐藏的canvas)c.drawImage(w.canvas,0,carY); //画最终显⽰的汽车c.restore(); //恢复Canvas的状态，对应的是类似“pop”操作carX+=dx; //重置汽车在X轴⽅向的位置，以模拟向前⾛carAlpha+=dx/radius; //按⽐例增加轮胎⾓度if(carX>c.canvas.width){ //设置某些定期的边界条件carX=-carWidth-10; //也可以将速度反向为dx*=-1;}}画背景：复制代码代码如下:function drawGrass(){//创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height); //为线性渐变指定渐变⾊，0表⽰渐变起始⾊，1表⽰渐变终⽌⾊grad.addColorStop(0,'#33CC00');grad.addColorStop(1,'#66FF22');c.fillStyle=grad;c.lineWidth=0;c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);}画车⾝：复制代码代码如下:function drawCar(){w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隐藏的画板w.strokeStyle='#FF6600'; //设置边框⾊w.lineWidth=2; //设置边框的宽度，单位为像素w.fillStyle='#FF9900'; //设置填充⾊w.beginPath(); //开始绘制新路径w.rect(0,0,carWidth,carHeight); //绘制⼀个矩形w.stroke(); //画边框w.fill(); //填充背景w.closePath(); //关闭绘制的新路径drawTire(tiresDelta+radius,carHeight+axisDelta); //我们开始画第⼀个轮⼦drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同样的，第⼆个}画轮胎：复制代码代码如下:function drawTire(x,y){w.save();w.translate(x,y);w.rotate(carAlpha);w.strokeStyle='#3300FF';w.lineWidth=1;w.fillStyle='#0099FF';w.beginPath();w.arc(0,0,radius,0,2*Math.PI,false);w.fill();w.closePath();w.beginPath();w.moveTo(radius,0);w.lineTo(-radius,0);w.stroke();w.closePath();w.beginPath();w.moveTo(0,radius);w.lineTo(0,-radius);w.stroke();w.closePath();w.restore();}由于原理简单，并且代码中作了详细注释，这⾥就不⼀⼀讲解！2.CSS3你将看到我们未通过⼀句JS代码就完全实现了和上⾯⼀样的动画效果：HTML代码：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animations in HTML5 using CSS3 animations</title></head><body><div id="container"><div id="car"><div id="chassis"></div><div id="backtire" class="tire"><div class="hr"></div><div class="vr"></div></div><div id="fronttire" class="tire"><div class="hr"></div><div class="vr"></div></div></div><div id="grass"></div></div><footer></footer></body></html>CSS代码：body{padding:0;margin:0;}定义车⾝与轮胎转到的动画（你会看到基本每⼀个动画都有四个版本的定义：原⽣版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）复制代码代码如下:/*定义动画：从-400px的位置移动到1600px的位置 */@keyframes carAnimation{0% { left:-400px; } /* 指定初始位置，0%等同于from*/100% { left:1600px; } /* 指定最终位置,100%等同于to*/}/* Safari and Chrome */@-webkit-keyframes carAnimation{0% {left:-400px; }100% {left:1600px; }}/* Firefox */@-moz-keyframes carAnimation{0% {left:-400; }100% {left:1600px; }}/*IE暂不⽀持,此处定义是为了向后兼容IE10*/@-ms-keyframes carAnimation{0% {left:-400px; }100%{left:1600px; }} @keyframes tyreAnimation{0% {transform: rotate(0); }100% {transform: rotate(1800deg); }}@-webkit-keyframes tyreAnimation{0% { -webkit-transform: rotate(0); }100% { -webkit-transform: rotate(1800deg); }}@-moz-keyframes tyreAnimation{0% { -moz-transform: rotate(0); }100% { -moz-transform: rotate(1800deg); }}@-ms-keyframes tyreAnimation{0% { -ms-transform: rotate(0); }100% { -ms-transform: rotate(1800deg); }} #container{position:relative;width:100%;height:600px;overflow:hidden; /*这个很重要*/}#car{position:absolute; /*汽车在容器中采⽤绝对定位*/width:400px;height:210px; /*汽车的总⾼度，包括轮胎和底盘*/z-index:1; /*让汽车在背景的上⽅*/top:300px; /*距顶端的距离(y轴)*/left:50px; /*距左侧的距离(x轴)*//*以下内容赋予该元素预先定义的动画及相关属性*/-webkit-animation-name:carAnimation; /*名称*/-webkit-animation-duration:10s; /*持续时间*/-webkit-animation-iteration-count:infinite; /*迭代次数-⽆限次*/-webkit-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -moz-animation-name:carAnimation; /*名称*/-moz-animation-duration:10s; /*持续时间*/-moz-animation-iteration-count:infinite; /*迭代次数-⽆限次*/-moz-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -ms-animation-name:carAnimation; /*名称*/-ms-animation-duration:10s; /*持续时间*/-ms-animation-iteration-count:infinite; /*迭代次数-⽆限次*/-ms-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ animation-name:carAnimation; /*名称*/animation-duration:10s; /*持续时间*/animation-iteration-count:infinite; /*迭代次数-⽆限次*/animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/}/*车⾝*/#chassis{position:absolute;width:400px;height:130px;background:#FF9900;border: 2px solid #FF6600;}/*轮胎*/.tire{z-index:1; /*同上，轮胎也应置于背景的上⽅*/position:absolute;bottom:0;border-radius:60px; /*圆半径*/height:120px; /* 2*radius=height */width:120px; /* 2*radius=width */background:#0099FF; /*填充⾊*/border:1px solid #3300FF;-webkit-animation-name:tyreAnimation;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:tyreAnimation;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:tyreAnimation;-ms-animation-duration:10s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:tyreAnimation;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear;}#fronttire{right:20px; /*设置右边的轮胎距离边缘的距离为20*/}#backtire{left:20px; /*设置左边的轮胎距离边缘的距离为20*/}#grass{position:absolute; /*背景绝对定位在容器中*/width:100%;height:130px;bottom:0;/*让背景⾊线性渐变,bottom,表⽰渐变的起始处，第⼀个颜⾊值是渐变的起始值，第⼆个颜⾊值是终⽌值 */ background:linear-grdaient(bottom,#33CC00,#66FF22);background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);background:-moz-linear-gradient(bottom,#33CC00,#66FF22);background:-ms-linear-gradient(bottom,#33CC00,#66FF22);}.hr,.vr{position:absolute;background:#3300FF;}.hr{height:1px;width:100%; /*轮胎的⽔平线*/left:0;top:60px;}.vr{width:1px;height:100%; /*轮胎的垂直线*/left:60px;top:0;}3.JQuery与CSS3这是⼀个效果与兼容性俱佳的⽅式（特别对于IE9暂不⽀持CSS3⽽⾔）HTML代码（可以看到与CSS3中的HTML代码并⽆不同）：复制代码代码如下:<html><head><meta charset="UTF-8" /><title>Animations in HTML5 using CSS3 animations</title></head><body><div id="container"><div id="car"><div id="chassis"></div><div id="backtire" class="tire"><div class="hr"></div><div class="vr"></div></div><div id="fronttire" class="tire"><div class="hr"></div><div class="vr"></div></div></div><div id="grass"></div></div><footer></footer></body></html>CSS:<style>body{padding:0;margin:0;}#container{position:relative;width:100%;height:600px;overflow:hidden; /*这个很重要*/}#car{position:absolute; /*汽车在容器中采⽤绝对定位*/width:400px;height:210px; /*汽车的总⾼度，包括轮胎和底盘*/z-index:1; /*让汽车在背景的上⽅*/top:300px; /*距顶端的距离(y轴)*/left:50px; /*距左侧的距离(x轴)*/}/*车⾝*/#chassis{position:absolute;width:400px;height:130px;background:#FF9900;border: 2px solid #FF6600;}/*轮胎*/.tire{z-index:1; /*同上，轮胎也应置于背景的上⽅*/position:absolute;bottom:0;border-radius:60px; /*圆半径*/height:120px; /* 2*radius=height */width:120px; /* 2*radius=width */background:#0099FF; /*填充⾊*/border:1px solid #3300FF;-o-transform:rotate(0deg); /*旋转(单位：度)*/-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}#fronttire{right:20px; /*设置右边的轮胎距离边缘的距离为20*/}#backtire{left:20px; /*设置左边的轮胎距离边缘的距离为20*/}#grass{position:absolute; /*背景绝对定位在容器中*/width:100%;height:130px;bottom:0;/*让背景⾊线性渐变,bottom,表⽰渐变的起始处，第⼀个颜⾊值是渐变的起始值，第⼆个颜⾊值是终⽌值 */ background:linear-grdaient(bottom,#33CC00,#66FF22);background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);background:-moz-linear-gradient(bottom,#33CC00,#66FF22);background:-ms-linear-gradient(bottom,#33CC00,#66FF22);}.hr,.vr{position:absolute;background:#3300FF;}.hr{height:1px;width:100%; /*⽔平线*/left:0;top:60px;}.vr{width:1px;height:100%; /*垂直线*/left:60px;top:0;}</style>JS代码：⾸先引⼊在线API：复制代码代码如下:<script src="https:///ajax/libs/jquery/1.7.1/jquery.min.js"></script>实现动画代码（相当简洁）：复制代码代码如下:<script>$(function(){var rot=0;var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));var origin={ /*设置我们的起始点*/left:-400};var animation={ /*该动画由jQuery执⾏*/left:1600 /*设置我们将移动到的最终位置*/};var rotate=function(){ /*该⽅法将被旋转的轮⼦调⽤*/rot+=2;$('.tire').css(prefix,'rotate('+rot+'deg)');};var options={ /*将要被jQuery使⽤的参数*/easing:'linear', /*指定速度，此处只是线性，即为匀速*/duration:10000, /*指定动画持续时间*/complete:function(){$('#car').css(origin).animate(animation,options);},step:rotate};plete();});</script>简单讲解：prefix⾸先识别出当前是哪个定义被采⽤了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ja次重用，所以就不解释了。 JavaScript Code 复制内容到剪贴板 4 5 6 7 8 9 10 } 11 12 function BasicObject(x, y, order) { 13 14 15 this.x = x; this.y = y; this.order = isNaN(order) ? 0 : order; } } Array.prototype.remove = function(obj) { for (i in this) { if (this[i] === obj) { this.splice(i, 1);
16 17 18 19 20 21 22 23 24 25 } 逐帧动画的基础对象，继承自基础对象类，添加了图像、总帧数两个属性，以及绘制逐帧对 象的方法 JavaScript Code 复制内容到剪贴板 26 function FrameAnimationObject(x, y, order, image, frame) { 27 28 29 BasicObject.call(this, x, y, order); this.image = image; this.frame = frame; } this.removeFrom = function(list) { list.remove(this); } this.addTo = function(list) { list.push(this); list.sort(function(a, b) {return a.order - b.order;});
30 this.currentFrame = 0; 杨太秘丸 okl
HTML5 Canvas 逐帧动画的实现
和 C++游戏开发相同， HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的 图片。通过循环绘制各帧的图像来实现动画的效果。 本示例中演示的是一个小人，默认状态下，小人朝右方站立；按下左 /右方向键的时候，小 人朝左/右方奔跑（在画布中没有位移） ；松开按键后保持奔跑的方向站立。 其中，向左或向右站立分别是一张6帧的图片，向左或向右奔跑分别是一张12帧的图片。 代码如下： HTML 代码： XML/HTML Code 复制内容到剪贴板 1 2 3 <canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element!</p> </canvas>