html中canvas的应用实例,drawing canvas
HTML5画布动画效果演示主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5画布的画方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。关键技术点：
Java脚本语言函数setTimeout()有两个参数，第一个是参数可以传递一个Java脚本语言方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
设置超时(更新，1000/30);
帆布的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage，offw，offh，width，height，x2，y2，width，height)；
其中哦，哦是指源图像的起始坐标点，宽度，高度表示源图像的宽与高，x2，y2表
示源图像在目标帆布上的起始坐标点。
一个22帧的大雁飞行图片实现的效果：
源图像：
程序代码：复制代码代码如下：
！声明文档类型
超文本标记语言
头
meta http-equiv= X-UA-Compatible content= chrome=IE8
meta http-equiv= Content-type Content= text/html；charset=UTF-8
标题画布鼠标事件演示/标题
link href= default。CSS rel=样式表/
脚本
var ctx=null//全局变量2d上下文
var started=false
var mText _ canvas=null
var x=0，y=0；
var frame=0；//22 5*5 2
var imageReady=false
var myImage=null
var px=300
var py=300
var x2=300
var y2=0；
window.onload=function() {
var canvas=文档。getelementbyid( animation _ canvas )；
控制台。日志(画布。父节点。客户端宽度)；
画布。宽度=画布。父节点。客户端宽度；
画布。高度=画布。父节点。客户身高；
如果(!canvas.getContext) {
不支持console.log(Canvas .请安装一个HTML5兼容的浏览器。);
返回；
}
//获取画布的2D上下文并绘制矩形
CTX=画布。获取上下文(“2d”)；
ctx.fillStyle= black
ctx.fillRect(0，0，canvas.width，canvas。身高)；
我的图像=文档。createelement(“img”)；
myImage.src=./罗宾。png ；
我的图像。onload=loaded()；
}
函数已加载(){
imageReady=true
设置超时(更新，1000/30);
}
函数redraw() {
ctx.clearRect(0，0，460，460)
ctx.fillStyle= black
ctx.fillRect(0，0，460，460)；
//查找图像中帧的索引
var height=myImage.naturalHeight/5;
可变宽度=myImage.naturalWidth/5;
var row=math。地板(框架/5)；
var col=frame-row * 5；
var offw=col * width
var offh=行*高
//第一个罗宾
px=px-5；
py=py-5；
如果(px -50) {
px=300
}
如果(py -50) {
py=300
}
//var rate=(帧1)/22;
//var rw=math。楼层(费率*宽度)；
//var RH=math。楼层(费率*高度)；
ctx.drawImage(myImage，offw，offh，width，height，px，py，width，height)；
//第二个罗宾
x2=x2-5；
y2=y2 5；
if(x2 -50) {
x2=300
y2=0；
}
ctx.drawImage(myImage，offw，offh，width，height，x2，y2，width，height)；
}
函数更新(){
redraw()；
框架；
if(frame=22)frame=0；
设置超时(更新，1000/30);
}
/脚本
/头
身体
h1HTML画布动画演示-由阴郁的鱼制作/h1
预播放动画/预
div id=我的画家
画布id=动画_画布/画布
/div
/body
/html
发现上传透明PNG格式有点问题，所以我上传不透明的图片。可以用其它图片替换，替换以后请修改最大帧数从22到你的实际帧数即可运行。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。