canvas字母雨效果程式碼例項
看過黑客帝國電影的朋友一定知道字母像是下雨一樣滑下的效果。
下面就通過程式碼例項介紹一下如何利用canvas實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { margin: 0px auto; } #q { width: 100%; height: 100%; margin: 0px auto; } </style> <script type="text/javascript"> window.onload = function () { var q = document.getElementById('q'); var width = q.width = document.documentElement.clientWidth; var height = q.height = document.documentElement.clientHeight; var letters = Array(256).join(1).split(''); var draw = function () { q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)'; q.getContext('2d').fillRect(0, 0, width, height); q.getContext('2d').fillStyle = '#0F0'; letters.map(function (y_pos, index) { text = String.fromCharCode(65 + Math.random() * 26); x_pos = index * 10; q.getContext('2d').fillText(text, x_pos, y_pos); letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10; }); }; setInterval(draw, 33); } </script> </head> <body> <canvas id="q"></canvas> </body> </html>
相關文章
- canvas火焰效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- canvas水位進度效果程式碼例項Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas
- canvas田字格效果程式碼例項Canvas
- canvas繪製圓環效果程式碼例項Canvas
- canvas螞蟻線效果程式碼例項Canvas
- canvas模擬彈幕效果程式碼例項Canvas
- canvas繪製箭頭效果程式碼例項Canvas
- canvas繪製夜空小屋效果程式碼例項Canvas
- canvas流星劃過星空效果程式碼例項Canvas
- canvas繪製鐘錶效果程式碼例項Canvas
- canvas繪製橢圓效果程式碼例項Canvas
- canvas實現的驗證碼效果程式碼例項Canvas
- canvas繪製魚吃豆效果程式碼例項Canvas
- canvas實現煙花燃放效果程式碼例項Canvas
- canvas繪製雪花飄落效果程式碼例項Canvas
- canvas實現的鋸齒效果程式碼例項Canvas
- canvas實現的鐘表效果程式碼例項Canvas
- 利用canvas實現的驗證碼效果程式碼例項Canvas
- canvas實現的雪花飄落效果程式碼例項Canvas
- canvas實現的藍色雨滴效果程式碼例項Canvas
- canvas實現的彈力小球效果程式碼例項Canvas
- 程式碼雨效果
- canvas刮刮樂程式碼例項Canvas
- canvas實現的七巧板效果程式碼例項Canvas
- canvas實現的動態心形效果程式碼例項Canvas
- canvas實現的圓形鐘錶效果程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- canvas實現文字線性漸變效果程式碼例項Canvas
- canvas畫圖程式碼例項Canvas
- canvas小遊戲程式碼例項Canvas遊戲
- canvas實現的賽貝爾曲線效果程式碼例項Canvas
- canvas實現的小球四壁碰撞效果程式碼例項Canvas
- canvas圓環百分比載入效果程式碼例項Canvas
- canvas繪製扇形程式碼例項Canvas