怎么用html画动画效果,HTML5画布绘制方法制作动画效果示例

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的绘制方法在不同的时间间隔替换不同的帧，这样看起来就像动画在播放，关键技术点及实例代码如下，关注的朋友可以参考下哈，希望对大家有所帮助

HTML5画布效果动画_ECSHOP演示

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5画布的绘制方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript的函数的setTimeout()有两个参数，第一个是参数可以传递一个JavaScript的方法，

另外一个参数代表间隔时间，单位为毫秒数代码示例：

setTimeout的(更新，1000至1030年);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage，offw，offh，宽度，高度，x2，y2，宽度，高度)；

其中offw，offh是指源图像的开始坐标点，宽度，高度表示源图像的宽与高，X2，Y2表

示源图像在目标画布上的起始坐标点。

一个22帧的大雁飞行图片实现的效果：

源图像：

程序代码：

复制代码

代码如下：

画布鼠标事件演示 title>

var ctx = null; //全局变量2d上下文

var starts = 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;

窗户。

var canvas = document.getElementById(“ animation_canvas”);

console.log(canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

如果(！canvas.getContext){

console.log(“不支持的画布。请安装兼容HTML5的浏览器。”);

返回;

}

//获取画布的2D上下文并绘制

矩形ctx = canvas.getContext(“ 2d”);

ctx.fillStyle =“ black”;

ctx.fillRect(0，0，canvas.width，canvas.height);

myImage = document.createElement('img');

myImage.src =“ ../robin.png”;

myImage.onload = loaded();

setTimeout(更新，1000/30);

}

函数redraw(){

ctx.clearRect(

0，0，460，460 )ctx.fillStyle =“ black”;

ctx.fillRect(0，0，460，460);

//在图像中找到帧的索引

var height = myImage.naturalHeight / 5;

var width = myImage.naturalWidth / 5;

var row = Math.floor(frame / 5);

var col = frame-row * 5;

var offw = col * width;

var offh =行*高度；

//第一个知更鸟

px = px-5;

py = py-5;

if(px

px = 300;

}

if(py

py = 300;

}

// var rate =(frame + 1)/ 22;

// var rw = Math.floor(rate * width);

// var rh = Math.floor(rate * height);

ctx.drawImage(myImage，offw，offh，width，height，px，py，width，height);

//第二个知更鸟

x2 = x2-5;

y2 = y2 + 5;

if(x2

x2 = 300;

y2 = 0;

}

ctx.drawImage(myImage，offw，offh，width，height，x2，y2，width，height);

}

函数update(){

redraw();

框架++;

如果(frame> = 22)frame = 0;

setTimeout(更新，1000/30);

}

script>

head>

HTML Canvas动画演示-通过Gloomy Fish h1>

播放动画 pre>

canvas>

div>

body>

html>

发现上传透明PNG格式有点问题，所以我上传不透明的图片。可以用其他图片替换，替换以后请修改最大帧数从22到您的实际帧数即可运行。