如何使用canvas實現多個隨機圓運動

阿新 • • 發佈：2019-02-08

此段程式碼使用canvas畫布實現多個圓形自上向下滑落，圓的大小及顏色隨機，背景圖片可根據自己的喜好更換，只需將大小與畫布大小統一即可。

文章下附有效果圖

<body>

<canvasid="canvas"width="493px"height="332px"></canvas>

<scripttype="text/javascript">

var canvas=document.getElementById("canvas");//獲取<canvas>元素 var context=canvas.getContext("2d");//建立畫布物件

//建立建構函式Circle function Circle(){ this.x=Math.random()*canvas.width;//在畫布內隨機生成x值 //隨機生成三原色 this.r1 = Math.floor(Math.random()*256); this.g = Math.floor(Math.random()*256); this.b = Math.floor(Math.random()*256); this.y=-10; this.r=Math.random()*14;//隨機半徑r // 繪製圓形的方法 this.paint=function

(){ context.beginPath(); context.globalAlpha = 0.7;//設定透明度 context.strokeStyle="rgb("+this.r1+","+this.g+","+this.b+")";//將隨機生成的三原色設為圓形的顏色 context.arc(this.x,this.y,this.r,0,Math.PI*2);//繪製圓形 context.stroke(); } // 控制圓形移動的方法 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 myimg=new Image(); myimg.src="bgg.jpg"; var time=0; //設定定時器 setInterval(function(){ context.drawImage(myimg,0,0); time++;//控制繪製時間 if(time%20==0){ createCircles(); } paintCircles(); stepCircles(); },50); </script></body>

如何使用canvas實現多個隨機圓運動

如何使用canvas實現多個隨機圓運動

Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件

頁面實現多個定時器（計時器）時選用NSTimer還是GCD？（幹貨不濕）

Android ViewPager實現多個圖片水平滾動

python 實現多個線程間消息隊列傳遞，一個簡單的列子

nginx實驗---lnmp實現多個虛擬主機，部署wordpress和phpmyadmin，並為後一個主機提供https

java 實現多個接口方法重名的解決辦法——內部類

使用github作為maven倉庫存放發布自己的jar包依賴實現多個項目公共部分代碼的集中，避免團隊中多個項目之間代碼的復制粘貼

js實現多個請求並列執行

在一個form表單中實現多個submit不同的action

Selenium中怎麽實現多個窗口之間的切換？

實現多個視頻下載

matlab實現一次性實現多個文件夾圖片轉化為.mat文件

利用 Siblings一步實現多個同級div，只改變當前點擊的div樣式

使用多線程實現多個客戶端與服務端通信1

實現多個具有相同方法的接口和父類與實現接口有相同方法

如何實現多個異步同步執行？

keras實現多個模型融合（非keras自帶模型，這裡以3個自己的模型為例）

java實現多個檔案以壓縮包匯出到本地

ython實現程序間的通訊有Queue,Pipe,Value+Array等,其中Queue實現多個程序間的通訊,而Pipe實現兩個程序間通訊,而Value+Array使用得是共享記憶體對映檔案的方式,所以速度比較快

如何使用canvas實現多個隨機圓運動

相關推薦