HTML5绘图笔记8：实战案例

设计canvas动画

绘制动画的步骤

在canvas画布中绘制动画实际上就是一个图形不断绘制、擦除、重绘的过程，具体步骤如下。

1. 编写绘图方法

2. 使用setInterval()方法设置画面重绘的间隔时间

   setInterval()语法格式如下：

setInterval(function,interval);

3. 保存与恢复绘图上下文的当前状态

例子1

<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var context;
var width,height;
var i;
function draw(id)
{
    var canvas = document.getElementById(id);  
    if (canvas == null)  
        return false;  
    context = canvas.getContext('2d'); 
    width=canvas.width;
    height=canvas.height;
    i=0;
    setInterval(rotate,100);         //十分之一秒
}
function rotate()
{   
    context.clearRect(0,0,width,height);
    context.fillStyle = "red";
    context.fillRect(i, 0, 50, 50);
    i=i+20;
}
var canvas = document.getElementById("myCanvas");  
draw("myCanvas")
</script>

例子2

<canvas id="myCanvas" width="500" height="240" style="border:solid 1px #93FB40;"></canvas>
<script type="text/javascript">
var globalId;
var i=0;
function draw(id)
{
    globalId=id;
    setInterval(Composite,1000);
}
function Composite() 
{  
    var canvas = document.getElementById(globalId);  
    if (canvas == null)  
        return false;  
    var context = canvas.getContext('2d'); 
    var oprtns = new Array(
    "source-atop",
    "source-in",
    "source-out",
    "source-over",
    "destination-atop",
    "destination-in",
    "destination-out",
    "destination-over",
    "lighter",
    "copy",
    "xor"
    );
    if(i>10) i=0;
    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();
 context.font="30px Georgia";
 context.fillText(oprtns[i],240,130);
    //绘制原有图形（蓝色长方形）
    context.fillStyle = "blue";
    context.fillRect(0, 0, 100, 100);
    //设置组合方式 
    context.globalCompositeOperation = oprtns[i];
    //设置新图形（红色圆形）
    context.beginPath();
    context.fillStyle = "red";
    context.arc(100, 100, 100, 0, Math.PI*2, false);
    context.fill(); 
    context.restore();
    i=i+1;
}
draw("myCanvas")
</script>

保存绘图

例子1

<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d'); 
context.fillStyle = "rgb(0, 0, 255)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255, 255, 0)";
context.fillRect(10, 20, 50, 50); 
window.location =canvas.toDataURL("image/jpeg");  
</script>

例子2

<script>  
window.onload = function() {  
 draw();  
 var saveButton = document.getElementById("saveImageBtn");  
 bindButtonEvent(saveButton, "click", saveImageInfo);  
 var dlButton = document.getElementById("downloadImageBtn");  
 bindButtonEvent(dlButton, "click", saveAsLocalImage);  
};  
function draw(){  
 var canvas = document.getElementById("thecanvas");  
 var ctx = canvas.getContext("2d");  
 ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
 ctx.fillRect(25,25,100,100);   
 ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
 ctx.fillRect(58, 74, 125, 100);  
 ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
}  
function bindButtonEvent(element, type, handler){  
 if(element.addEventListener) {  
  element.addEventListener(type, handler, false);  
 } else {  
  element.attachEvent('on'+type, handler);  
 }  
}  
function saveImageInfo(){  
 var mycanvas = document.getElementById("thecanvas");  
 var image    = mycanvas.toDataURL("image/png");  
 var w=window.open('about:blank','image from canvas');  
 w.document.write("<img src='"+image+"' alt='from canvas'/>");  
}  
function saveAsLocalImage(){  
 var myCanvas = document.getElementById("thecanvas");  
 // here is the most important part because if you dont replace you will get a DOM 18 exception.  
 // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
 window.location.href=image; // it will save locally  
}  
</script>  

<canvas width="200" height="200" id="thecanvas"></canvas>  
<button id="saveImageBtn">保存图像</button>  
<button id="downloadImageBtn">下载图像</button>