canvas氣泡上浮效果程式碼例項
本章節分享一段程式碼例項,它使用canvas實現了氣泡上浮的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload = function () { function Circle() { this.x = Math.random() * canvas.width; this.y = canvas.height; this.r = Math.random() * 10; //繪製圓形 this.paint = function () { context.beginPath(); context.arc(this.x, this.y, this.r, 0, Math.PI * 2); context.fillStyle = "white"; context.globalAlpha = 0.5; context.fill(); } //控制圓形移動 this.step = function () { this.y--; } } var circles = []; function createCircles() { var circle = new Circle(); circles[circles.length] = circle; } function paintCircles() { for (var i = 0; i < circles.length; i++) { circles[i].paint(); } } function stepCircles() { for (var i = 0; i < circles.length; i++) { circles[i].step(); } } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var myimg = new Image(); myimg.src = "mytest/demo/cite.jpg"; var timer = ""; setInterval(function () { context.drawImage(myimg, 0, 0); timer++; if (timer % 20 == 0) { createCircles(); } paintCircles(); stepCircles(); }, 10); } </script> </head> <body> <div id="d1"> <canvas id="canvas"></canvas> </div> </body> </html>
相關文章
- css3實現的氣泡效果程式碼例項CSSS3
- canvas火焰效果程式碼例項Canvas
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- css氣泡對話方塊程式碼例項CSS
- 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
- css3漂浮氣球效果程式碼例項CSSS3
- css實現的氣泡型提示框程式碼例項CSS
- 利用canvas實現的驗證碼效果程式碼例項Canvas
- canvas實現的雪花飄落效果程式碼例項Canvas
- canvas實現的藍色雨滴效果程式碼例項Canvas
- canvas實現的彈力小球效果程式碼例項Canvas
- 滑鼠懸浮上浮出現說明文字程式碼例項
- canvas刮刮樂程式碼例項Canvas
- canvas實現的七巧板效果程式碼例項Canvas
- canvas實現的動態心形效果程式碼例項Canvas
- canvas實現的圓形鐘錶效果程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- canvas實現文字線性漸變效果程式碼例項Canvas
- canvas畫圖程式碼例項Canvas
- canvas小遊戲程式碼例項Canvas遊戲