隨著html5發(fā)展，canvas標簽作為h5革命性的發(fā)展標志也越來越流行。canvas標簽的強大之處，不僅在于它可以作為一個獨立的畫布，也可以利用canvas做一些動畫而不用導入flash文件。同時，canvas還可以一些游戲、商城商品圖片放大器功能等等。 這篇博客先寫一些簡單動畫，同時描述一下原理。 首先，canvas標簽不是一個獨立的部分，它是要以js代碼輔助而成的一個模塊，所以js代碼對其尤為重要。 body中寫入canvas標簽： 1
//控制小球的運動與暫停 　　 直接上js代碼： canvas的js開頭都是固定的： 1 2 var canvas = document.getElementById('canvas'), cx= canvas.getContext('2d'),
paused = true ,//設置小球加載完成是否暫停，現(xiàn)在加載完成小球不動。 加載三個小球的數(shù)據(jù)： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 discs = [ { x:150, y:250, velocityx:-3.2, //小球橫向運動速度 velocityy:3.5, //小球縱向運動速度 radius:25,　　　　　　　　//小球半徑 strokestyle:'gray', //小球填充顏色 }, { x:50, y:150, velocityx:2.2, velocityy:2.5, radius:25, strokestyle:'blue', }, { x:150, y:75, velocityx:1.2, velocityy:1.5, radius:25, strokestyle:'orange', }, ], 　　 定義小球的數(shù)量以及找到控制小球暫停的button 1 2 3 numdiscs = discs.length, //小球數(shù)量 animatebutton = document.getElementById('animatebutton'); // 小球暫停開始按鈕 　 用canvas畫出小球： 1 2 3 4 5 6 7 8 9 10 11 12 13 function draw(){ var disc = discs[i]; //小球的索引 for(var i=0;i cx.canvas.width || disc.x + disc.velocityx -disc.radius<0) //小球橫向撞墻后朝相反方向運動 disc.velocityx = -disc.velocityx; if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0) //小球縱向向撞墻后朝相反方向運動 disc.velocityy = -disc.velocityy; disc.x+=disc.velocityx; //每次循環(huán)小球橫向運動距離 disc.y+=disc.velocityy;　　//每次循環(huán)小球縱向運動距離 1 } } 　 設置小球的運動，這是一個循環(huán)函數(shù)

網(wǎng)友評論