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);
var img = new Image(); //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> 来源：?p=157
=>
<=>
<=========>
<=>
</===></
a></
div>
</
body>
</
html>
实例说明:
?p=552
我要
本文来自:?id=921&cid=7
相关文章
精彩导读
热门资讯
关注我们
