隨著html5發(fā)展，canvas標(biāo)簽作為h5革命性的發(fā)展標(biāo)志也越來(lái)越流行。canvas標(biāo)簽的強(qiáng)大之處，不僅在于它可以作為一個(gè)獨(dú)立的畫(huà)布，也可以利用canvas做一些動(dòng)畫(huà)而不用導(dǎo)入flash文件。同時(shí)，canvas還可以一些游戲、商城商品圖片放大器功能等等。 這篇博客先寫(xiě)一些簡(jiǎn)單動(dòng)畫(huà)，同時(shí)描述一下原理。 首先，canvas標(biāo)簽不是一個(gè)獨(dú)立的部分，它是要以js代碼輔助而成的一個(gè)模塊，所以js代碼對(duì)其尤為重要。 body中寫(xiě)入canvas標(biāo)簽： 1
//控制小球的運(yùn)動(dòng)與暫停 　　 直接上js代碼： canvas的js開(kāi)頭都是固定的： 1 2 var canvas = document.getElementById('canvas'), cx= canvas.getContext('2d'),
paused = true ,//設(shè)置小球加載完成是否暫停，現(xiàn)在加載完成小球不動(dòng)。 加載三個(gè)小球的數(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, //小球橫向運(yùn)動(dòng)速度 velocityy:3.5, //小球縱向運(yùn)動(dòng)速度 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'); // 小球暫停開(kāi)始按鈕 　 用canvas畫(huà)出小球： 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) //小球橫向撞墻后朝相反方向運(yùn)動(dòng) disc.velocityx = -disc.velocityx; if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0) //小球縱向向撞墻后朝相反方向運(yùn)動(dòng) disc.velocityy = -disc.velocityy; disc.x+=disc.velocityx; //每次循環(huán)小球橫向運(yùn)動(dòng)距離 disc.y+=disc.velocityy;　　//每次循環(huán)小球縱向運(yùn)動(dòng)距離 1 } } 　 設(shè)置小球的運(yùn)動(dòng)，這是一個(gè)循環(huán)函數(shù)

網(wǎng)友評(píng)論