日期:2012/03/05
今天我們分享乙個來自於html5canvastutorials的超酷彈跳球效果,這裡我們使用純html5的畫布來實現動畫及其圖形。整個效果使用小球來組合生成字型,如果你的滑鼠逼近這些小球,它們會四散而逃,當你的滑鼠離開後,它們又自動復原,效果很酷,希望大家喜歡!
if (ball.y < (ball.radius))//right wall condition
if (ball.x > (canvas.width - ball.radius))
//left wall condition
if (ball.x < (ball.radius)) }}
function ball(x, y, vx, vy, color)
function animate(canvas, balls, lasttime, mousepos)
//request new frame
requestanimframe(function());
}window.onload = function();
canvas.addeventlistener("mousemove", function(evt));
canvas.addeventlistener("mouseout", function(evt));
animate(canvas, balls, time, mousepos);
};
Html5畫布canvas小例
小例中用到了畫布canvas的畫矩形,畫圓或弧,畫線,畫文字,顏色漸變。其全部顏色 字型 圖形都是通過js在canvas上繪製形成,總結了幾個context物件的方法如下 1.畫矩形 fillrect x,y,width,height 矩形左上角點x座標,矩形左上角點y座標,矩形寬度,矩形高度 2....
HTML5邊玩邊學(1) 畫布
一 標籤 html5 引入了乙個新的 標籤,這個標籤所代表的區域就好象一塊畫布,你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤,瀏覽器的圖形表現力被極大的提公升,flash 和 silverlight 有沒有感到威脅呢?標籤的用法非常簡單,如下 code highlighting produ...
HTML5邊玩邊學(1) 畫布
一 標籤 html5 引入了乙個新的 標籤,這個標籤所代表的區域就好象一塊畫布,你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤,瀏覽器的圖形表現力被極大的提公升,flash 和 silverlight 有沒有感到威脅呢?google聲稱chrome7瀏覽器將提速60倍 標籤的用法非常簡單,如...