分享乙個HTML5畫布實現的超酷文字彈跳球效果

日期：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倍 標籤的用法非常簡單，如...