globalCompositeOperation = type 设置不同形状的组合类型
type:(方的图形是已经存在的canvas内容，圆的图形是新的形状)
source-over(默认) – 在canvas内容上面画新的形状
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
darker
xor
copy
clip()
基本的动画步骤：
1.清除canvas – clearRect
2.保存canvas状态 – save
3.画要做动画的形状
4.恢复canvas状态 – 如果你已经保存了状态，在画新的帧之前回复它
控制动画
setInterval(animateShape,500);
setTimeout(animateShape,500);
//User Variables
img.src = 'Capitan_Meadows,_Yosemite_National_Park.jpg';
var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 30; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
//End User Variables
var dx = 0.75;
var imgW = img.width*scale;
var imgH = img.height*scale;
var x = 0;
if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
var clearX
var clearY
if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
else { clearX = CanvasXSize; }
if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
else { clearY = CanvasYSize; }
var ctx;
function init() {
//Get Canvas Element
ctx = document.getElementById('canvas').getContext('2d');
//Set Refresh Rate
return setInterval(draw, speed);
}
function draw() {
//Clear Canvas
ctx.clearRect(0,0,clearX,clearY);
//If image is <= Canvas Size
if (imgW <= CanvasXSize) {
//reset, start from beginning
if (x > (CanvasXSize)) { x = 0; }
//draw aditional image
if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
}
//If image is > Canvas Size
else {
//reset, start from beginning
if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
//draw aditional image
if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
}
//draw image
ctx.drawImage(img,x,y,imgW,imgH);
//amount to move
x += dx;
}
<body onload="init();">
<canvas id="canvas" width="800" height="200"></canvas>
如果您喜欢本文请分享给您的好友，谢谢！如想浏览更多更好的Html教程内容，请登录：
相关文章
精彩导读
热门资讯
关注我们
