效果：
原理：
用canvas逐行輸出文字，然後讓背景顏色逐漸加深，再隨機中斷某些列。
**：
html：
<canvas
id="c"
>
canvas
>
css：
canvas
js：
var c = document.getelementbyid("c");
var ctx = c.getcontext("2d");
//全屏
c.height =window.innerheight;
c.width =window.innerwidth;
//文字
var txts = "0123456789";
//轉為陣列
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
//用於計算輸出文字時座標，所以長度即為列數
var drops =;
//初始值
for(var x = 0; x < columns; x++)
drops[x] = 1;
//輸出文字
function
draw()
}setinterval(draw, 33);
用HTML5 Canvas 實現的 時鐘
基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...