5、利用canvas元素繪製動畫
在canvas畫布中製作動畫實際上就是不斷變化座標、擦除、重繪的過程
（2）設定繪圖函式的方式一：通過不斷變換x，y的座標來實現
index1.html檔案中的**如下：（index2.html檔案中把'canvas1.js'換成'canvas2.js'即可）
canvas1.js檔案中的**如下：
//實現的動畫效果：相同樣式的矩形每隔100秒不斷出現（可以模仿貪吃蛇，進度條的移動）
functiondraw(id){
var canvas=document.getelementbyid(id);
context=canvas.getcontext('2d');
setinterval(painting,100);//每隔100毫秒執行一次painting函式，自帶迴圈功能
i=0;
//動畫的實現以畫布大小為準，所以setinterval函式不用呼叫clearinterval就可以停止
functionpainting(){
context.fillstyle='green';//填充顏色為綠色
context.fillrect(i,0,10,10);//繪製起點的橫座標每次都是變化的
i=i+20;//橫座標每次都加20，矩形之間有間隔，一直到畫布的邊緣停止迴圈
//i++;橫座標每次只加1，矩形連起來在水平方向上慢慢移動
canvas2.js檔案中的**如下：
//實現的動畫效果：從四個角開始以漸變的方式畫乙個叉號
setinterval(painting,10);//每隔10毫秒執行一次painting函式，自帶迴圈功能
i=0;
//動畫的實現以畫布大小為準，所以setinterval函式不用呼叫clearinterval就可以停止
functionpainting(){
context.fillstyle='green';//填充顏色為綠色
context.fillrect(i,i,10,10);//橫縱座標從對角線的左上角方向開始移動
context.fillrect(400-i,400-i,10,10);//橫縱座標從對角線的右下角方向開始移動
context.fillrect(i,400-i,10,10);//橫縱座標從對角線的左下角方向開始移動
context.fillrect(400-i,i,10,10);//橫縱座標從對角線的右上角方向開始移動
i++;//橫縱座標每次只加1，矩形連起來在對角線的方向上移動
（3）設定繪圖函式的方式二：用clearrect(x,y,width,height)方法將畫布整體或者區域性擦除，其中x,y是擦除的起點座標，width、height是擦除的寬度和高度
canvas3.js檔案中的**如下：
//實現的動畫效果：每次只有乙個矩形不斷在水平方向上移動
varcontext;
varwidth,height;
var i;
functiondraw(id){
var canvas=document.getelementbyid(id);
context=canvas.getcontext('2d');
width=canvas.width;
height=canvas.height;
setinterval(painting,100);//每隔10毫秒執行一次painting函式，自帶迴圈功能
i=0;
//動畫的實現以畫布大小為準，所以setinterval函式不用呼叫clearinterval就可以停止
functionpainting(){
context.fillstyle='#fff';//擦除顏色為白色
context.clearrect(0,0,width,height);//每次迴圈都擦除整個畫布的圖形，重新繪製新的矩形
context.fillstyle='green';//填充顏色為綠色
context.fillrect(i,20,10,10);//新繪製的矩形在水平方向上不斷移動
i=i+20;
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...
HTML5新增的canvas元素技能之一
1 利用canvas元素建立畫布 1 建立畫布 指定canvas元素的三個屬性id width 寬度 height 高度 3 使用draw函式進行繪畫 在body元素中加入 nl ad draw canvas 屬性，呼叫指令碼檔案中的draw函式，canvas的基本語法如下 2 利用canvas元素...
HTML5新增的canvas元素技能之二
3 利用canvas元素及js指令碼繪製圓形 1 表明開始繪製新路徑 利用上下文物件的beginpath 方法 2 繪製圓形路徑 利用上下文物件的arc 方法，語法是 arc x,y,radius,startangle,endangle,anticlockwise 其中 x,y 是圓的圓心，radi...