當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
基于JS和Canvas的小球碰撞动画演示
生活随笔
收集整理的這篇文章主要介紹了
基于JS和Canvas的小球碰撞动画演示
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果：
1010代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#myCanvas{border: 1px solid black;margin: 20px auto;display:block;}</style></head><body><!--canvas:"畫(huà)布"，使用來(lái)繪制圖形的，最終以圖片的形式顯示在瀏覽器上，默認(rèn)寬高300/150--><canvas id="myCanvas" width="600" height="600">當(dāng)前瀏覽器不支持canvas---不兼容</canvas></body><script type="text/javascript"> // 在JS當(dāng)中,處理canvas繪制過(guò)程 // 1.獲取畫(huà)布對(duì)象var canvas=document.getElementById("myCanvas"); // 注意:在canvas中不使用css樣式設(shè)置寬高,canvas繪制的圖像會(huì)發(fā)生形變; // 可以使用屬性設(shè)置; // canvas.width=600//獲取繪制環(huán)境的上下文---canvas的'畫(huà)筆'var pencil=canvas.getContext("2d");function random(m,n){return Math.floor(Math.random()*(n-m+1)+m);}//通過(guò)面向?qū)ο蟮乃枷?#xff0c;創(chuàng)建小球，以及調(diào)用小球移動(dòng)的方法function Ball(){//設(shè)置屬性//隨機(jī)小球的半徑this.r = random(5,10);//隨機(jī)小球的顏色this.color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";//隨機(jī)小球圓心x,圓心ythis.x = random(this.r,canvas.width-this.r);//保證小球不出去this.y = random(this.r,canvas.height-this.r);//隨機(jī)速度（控制移動(dòng)方向） // 水平方向上的速度 一半幾率 random(0,1) ? 1：-1 (random(1,10) >= 5 ? 1 : -1)this.speedX = random(2,6)*(random(0,1)?1:-1);//垂直方向上的速度this.speedY = random(2,6)*(random(0,1)?1:-1);}//原型中的寫(xiě)小球移動(dòng)的方法Ball.prototype.move = function(){this.x += this.speedX;this.y += this.speedY;//小球碰撞四個(gè)邊界反彈//左邊界if(this.x <= this.r){this.x = this.r;//反彈this.speedX *= -1;}//右邊界if(this.x >= canvas.width - this.r){this.x =canvas.width - this.r ;//反彈this.speedX *= -1;}//上邊界if(this.y <= this.r){this.y = this.r;//反彈this.speedY *= -1;}//下邊界if(this.y >= canvas.height- this.r){this.y =canvas.height - this.r ;//反彈this.speedY *= -1; }}//繪制小球的方法Ball.prototype.draw = function(){//開(kāi)始繪制pencil.beginPath();pencil.arc(this.x,this.y,this.r,0,Math.PI*2,false); // 填充pencil.fillStyle = this.color;pencil.fill();}var balls = [];//存儲(chǔ)所有的小球?qū)ο?/創(chuàng)建對(duì)象for(var i = 0;i < 100;i++){var ball = new Ball();balls.push(ball);}pencil.shadowColor = "lightcyan";pencil.shadowBlur = 30;//讓小球移動(dòng)起來(lái)setInterval(function(){//每次小球重新繪制和移動(dòng)移動(dòng)之前,清空畫(huà)布中的內(nèi)容pencil.clearRect(0,0,canvas.width,canvas.height);pencil.beginPath();pencil.fillStyle = "black";pencil.fillRect(0,0,canvas.width,canvas.height);for(var i=0;i<balls.length;i++){balls[i].draw();//繪制小球balls[i].move();//移動(dòng)小球}},20)// 創(chuàng)建一個(gè)小球 // var ball = new Ball(); // setInterval(function(){ // pencil.clearRect(0,0,canvas.width,canvas.height); // ball.draw(); // ball.move(); // },10);</script> </html>?
總結(jié)
以上是生活随笔為你收集整理的基于JS和Canvas的小球碰撞动画演示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ctfmon.exe
- 下一篇： gradle idea java ssm