這篇文章主要講解了javascript canvas檢測小球碰撞的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:空間域名、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、宜良網(wǎng)站維護、網(wǎng)站推廣。
定義一個canvas標(biāo)簽
<div class="cnavasInfo">
<canvas
id="canvas"
width="800"
height="500"
></canvas>
</div>
函數(shù)以及相關(guān)的邏輯處理
export default {
data() {
return {
canvas: null,
ctx: null,
arcObj: {}
};
},
mounted() {
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext("2d");
// this.move(); // 矩形的邊緣碰撞函數(shù)
// this.moveArc(); // 繪制碰撞圓形,對象形式
this.moveRect()
},
methods: {
move() {
let x = 0;
let y = 0;
let width = 100;
let height = 100;
let speedX = 2;
let speedY = 2;
let ctx = this.ctx;
ctx.fillStyle = "red";
ctx.fillRect(x, y, width, height);
setInterval(() => {
ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
x += speedX;
if (x > this.canvas.width - width) {
speedX *= -1;
} else if (x < 0) {
speedX *= -1;
}
y += speedY;
if (y > this.canvas.height - height) {
speedY *= -1;
} else if (y < 0) {
speedY *= -1;
}
ctx.fillRect(x, y, width, height);
}, 10);
// this.requestmove(x,y,width,height,ctx,speedX,speedY); // 請求幀的動畫過程
},
requestmove(x, y, width, height, ctx, speedX, speedY) {
ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
x += speedX;
if (x > this.canvas.width - width) {
speedX *= -1;
} else if (x < 0) {
speedX *= -1;
}
y += speedY;
if (y > this.canvas.height - height) {
speedY *= -1;
} else if (y < 0) {
speedY *= -1;
}
ctx.fillRect(x, y, width, height);
window.requestAnimationFrame(
this.requestmove(x, y, width, height, ctx, speedX, speedY)
);
},
moveArc(x, y, r, speedX, speedY) {
this.x = x;
this.y = y;
this.r = r;
this.speedX = speedX;
this.speedY = speedY;
this.moveUpdata = function() {
this.x += this.speedX;
if (this.x > this.canvas.width - this.r) {
this.speedX *= -1;
} else if (this.x < 0) {
this.speedX *= -1;
}
this.y += this.speedY;
if (this.y > this.canvas.height - this.r) {
this.speedY *= -1;
} else if (this.y < 0) {
this.speedY *= -1;
}
};
},
moveRect(){
// 面向?qū)ο缶幊?
function Rect(x,y,width,height,color,speedX,speedY,ctx,canvas) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color
this.speedX = speedX
this.speedY = speedY
this.ctxRect = ctx
this.canvas = canvas
}
Rect.prototype.draw = function() {
this.ctxRect.beginPath();
this.ctxRect.fillStyle = this.color
this.ctxRect.fillRect(this.x,this.y,this.width,this.height)
this.ctxRect.closePath();
}
Rect.prototype.move = function() {
this.x += this.speedX
if(this.x > this.canvas.width - this.width){
this.speedX *= -1
} else if(this.x < 0){
this.speedX *= -1
}
this.y += this.speedY
if(this.y > this.canvas.height - this.height){
this.speedY *= -1
} else if(this.y < 0){
this.speedY *= -1
}
}
let rect1 = new Rect(0,100,100,100,'red',2,2,this.ctx,this.canvas)
let rect2 = new Rect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas)
// rect1.draw();
// rect2.draw()
let animate = ()=>{
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
rect1.draw()
rect1.move()
rect2.draw()
rect2.move()
let rect1Min = rect1.x;
let rect1Max = rect1.x + rect1.width
let rect2Min = rect2.x
let rect2Max = rect2.x + rect2.width
let min = Math.max(rect1Min,rect2Min)
let max = Math.min(rect1Max,rect2Max)
if(min < max){
rect1.speedX *= -1;
rect1.speedY *= 1;
rect2.speedX *= -1
rect2.speedY *= 1
}
window.requestAnimationFrame(animate)
}
animate()
}
}
};
樣式控制
#canvas {
border: 1px solid black;
}
看完上述內(nèi)容,是不是對javascript canvas檢測小球碰撞的方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目:javascriptcanvas檢測小球碰撞的方法
網(wǎng)頁網(wǎng)址:http://www.rwnh.cn/article10/jipogo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、虛擬主機、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)