欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 Canvas draw要领建造动画结果示例

发布时间:2016-11-26  编辑:杨雨个人博客网站   点击:   

HTML5 Canvas动画结果演示
首要头脑:
起主要筹备一张有持续帧的图片,然后操作HTML5 Canvas的draw要领在差异的时距离断绘制差异的帧,这样看起来就像动画在播放。
要害技能点:
JavaScript 函数setTimeout()有两个参数,第一个是参数可以转达一个JavaScript要领,
其它一个参数代表隔断时刻,单元为毫秒数。代码示例:
setTimeout( update, 1000/30);
Canvas的API-drawImage()要领,必要指定所有9个参数:
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
个中offw, offh是指源图像的起始坐标点,width, height暗示源图像的宽与高,x2,y2表
示源图像在方针Canvas上的起始坐标点。
一个22帧的大雁航行图片实现的结果:
HTML5 Canvas draw方式制作动画功效示例 
源图像:
HTML5 Canvas draw方式制作动画功效示例 
措施代码:


代码如下:
<!DOCTYPE Html>
<Html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/Html;charset=UTF-8">
<title>Canvas Mouse Event Demo</title>
<link href="default.Css" rel="stylesheet" />
<script>
var ctx = null; // global variable 2d context
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 = document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
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();
}
function loaded() {
imageReady = true;
setTimeout( update, 1000/30);
}
function redraw() {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// find the index of frames in image
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 = row * height;
// first robin
px = px - 5;
py = py - 5;
if(px < -50) {
px = 300;
}
if(py < -50) {
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);
// second robin
x2 = x2 - 5;
y2 = y2 + 5;
if(x2 < -50) {
x2 = 300;
y2 = 0;
}
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);
}
function update() {
redraw();
frame++;
if (frame >= 22) frame = 0;
setTimeout( update, 1000/30);
}
</script>
</head>
<body>
<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>
<pre>Play Animations</pre>
<div id="my_painter">
<canvas id="animation_canvas"></canvas>
</div>
</body>
</Html>

发明上传透明PNG名目有点题目,以是我上传不透明的图片。可以用其余图片替代,替代往后请修改最大帧数从22到你的现实帧数即可运行。 本文地址:http://itbyc.com/web/html5/13370.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1