HTML5 Canvas draw方法制作動(dòng)畫(huà)效果示例

2020-03-24 17:18:30

字體：大中小

供稿：網(wǎng)友

HTML5 Canvas動(dòng)畫(huà)效果演示
主要思想：
首先要準(zhǔn)備一張有連續(xù)幀的圖片，然后利用HTML5 Canvas的draw方法在不同的時(shí)間間隔繪制不同的幀，這樣看起來(lái)就像動(dòng)畫(huà)在播放。
關(guān)鍵技術(shù)點(diǎn)：
JavaScript 函數(shù)setTimeout()有兩個(gè)參數(shù)，第一個(gè)是參數(shù)可以傳遞一個(gè)JavaScript方法，
另外一個(gè)參數(shù)代表間隔時(shí)間，單位為毫秒數(shù)。代碼示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9個(gè)參數(shù)：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源圖像的起始坐標(biāo)點(diǎn)，width, height表示源圖像的寬與高，x2,y2表
示源圖像在目標(biāo)Canvas上的起始坐標(biāo)點(diǎn)。
一個(gè)22幀的大雁飛行圖片實(shí)現(xiàn)的效果：

源圖像：

html' target='_blank'>程序代碼：

復(fù)制代碼代碼如下:
!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.fill ;
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.fill ;
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

發(fā)現(xiàn)上傳透明PNG格式有點(diǎn)問(wèn)題，所以我上傳不透明的圖片。可以用其它圖片替換，替換以后請(qǐng)修改最大幀數(shù)從22到你的實(shí)際幀數(shù)即可運(yùn)行。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML代碼-網(wǎng)頁(yè)頭部代碼全清楚

下一篇：在HTML5中使用MathML數(shù)學(xué)公式