這篇文章主要介紹了Html5如何實(shí)現(xiàn)Canvas動(dòng)畫基礎(chǔ)碰撞檢測(cè),具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國(guó)際域名空間、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、興業(yè)網(wǎng)站維護(hù)、網(wǎng)站推廣。
在Canvas中進(jìn)行碰撞檢測(cè),大家往往直接采用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內(nèi)置的碰撞檢測(cè)功能,好奇的你有思考過(guò)它們的內(nèi)部運(yùn)行機(jī)制嗎?下面將針對(duì)基本的碰撞檢測(cè)技術(shù)進(jìn)行講解:
1、基于矩形的碰撞檢測(cè)
所謂碰撞檢測(cè)就是判斷物體間是否發(fā)生重疊,這里我們假設(shè)討論的碰撞體都是矩形物體。下面示例中我們將創(chuàng)建兩個(gè)rect對(duì)象A和B(以下簡(jiǎn)稱A,B),其中A位置固定,B跟隨鼠標(biāo)移動(dòng),當(dāng)A,B重疊時(shí)控制臺(tái)將提示intercect!!
1、創(chuàng)建Rect對(duì)象
這里我們新建Rect.js,建立Rect對(duì)象并為其添加原型方法draw,該方法將根據(jù)當(dāng)前對(duì)象的屬性(位置、大小)繪制到傳入的畫布對(duì)象(context)中。
代碼如下 :
function Rect(x,y,width,height) { this.x = x; this.y = y; this.width = width; this.height = height; } Rect.prototype.draw = function(context){ context.save(); context.translate(this.x,this.y); context.fillRect(0,0,this.width,this.height); context.restore(); }
2、獲取鼠標(biāo)位置
因?yàn)锽需要跟隨鼠標(biāo)移動(dòng)所以我們需要檢測(cè)鼠標(biāo)在畫布的當(dāng)前位置。創(chuàng)建Capturemouse函數(shù)檢測(cè)鼠標(biāo)在傳入的文檔節(jié)點(diǎn)(element)上的移動(dòng)并返回一個(gè)mouse對(duì)象(其中包含了鼠標(biāo)的x,y坐標(biāo))。
代碼如下:
function Capturemouse (element) { var mouse={x:null,y:null}; element.addEventListener('mousemove',function (event) { var x, y; if(event.pageX || event.pageY){ x = event.pageX; y = event.pageY; }else{ x = event.clientX+document.body.scrollLeft+ document.documentElement.scrollLeft; y = event.clientY+document.body.scrollTop+ document.documentElement.scrollTop; } x -=element.offsetLeft; y -=element.offsetTop; mouse.x = x; mouse.y = y; },false); return mouse; }
3、碰撞檢測(cè)
檢測(cè)A,B是否發(fā)生重疊,在討論是否發(fā)生重疊時(shí)我們可以先看看沒有重疊的四種情況,如下圖:
以下是對(duì)這四種狀態(tài)的判斷:
1、rectB.y+rectB.height < rectA.y
2、rectB.y > rectA.x +rectA.width
3、rectB.y > rectA.y + rectA.height
4、rectB.x+rectB.width < rectA.x
知道如何判斷沒有重疊的狀態(tài),那發(fā)生重疊的狀態(tài)該如何判斷呢?沒錯(cuò)“取反”!,我們創(chuàng)建函數(shù)Interaect并添加到Init.js中,該函數(shù)傳入兩個(gè)Rect對(duì)象參數(shù),當(dāng)兩Rect對(duì)象發(fā)生重疊將返回true。
代碼如下:
function Intersect(rectA,rectB) { return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width || rectB.y > rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x) }
4、動(dòng)畫循環(huán)
新建animationjs,設(shè)置requestAnimationFrame()動(dòng)畫函數(shù)。
在循環(huán)體中將做以下兩件事:
“清空”當(dāng)前canvas中內(nèi)容,為繪制下一幀做準(zhǔn)備。
檢測(cè)A,B是否發(fā)生重疊,若重疊則在控制臺(tái)輸出interact?。?!
檢測(cè)當(dāng)前鼠標(biāo)在canvas上的移動(dòng)并將鼠標(biāo)位置更新到B的位置屬性中。
根據(jù)新的位置屬性重新繪制A,B(當(dāng)然,A的位置不會(huì)更新但因?yàn)槊看窝h(huán)將清空canvas所以需要重新繪制)
代碼如下:
function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rectA,rectB)){ console.log('interact!!!!'); } if(mouse.x){ rectB.x = mouse.x; rectB.y = mouse.y; } rectA.draw(context); rectB.draw(context); }
3、初始化
新建Init.js ,獲取canvas元素并綁定鼠標(biāo)移動(dòng)檢測(cè),初始化Rect對(duì)象A和B,最后開啟動(dòng)畫循環(huán)。
代碼如下:
window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); Capturemouse(canvas); rectA = new Rect(canvas.width/2,canvas.height/2,100,100); rectB = new Rect(100,100,100,100); drawAnimation(); }
2、基于圓形的碰撞檢測(cè)
說(shuō)完矩形碰撞,我們?cè)賮?lái)聊聊圓形碰撞,同樣我們將創(chuàng)建兩個(gè)Circle對(duì)象A和B(以下簡(jiǎn)稱A,B),其中A位置固定,B跟隨鼠標(biāo)移動(dòng),當(dāng)A,B重疊時(shí)控制臺(tái)將提示intercect!!
1、創(chuàng)建circle對(duì)象
function Circle(x,y,radius) { this.x = x; this.y = y; this.radius = radius; } Circle.prototype.draw = function(context){ context.save(); context.translate(this.x,this.y); context.beginPath(); context.arc(0,0,this.radius,0,Math.PI*2,false); context.fill(); context.restore(); }
2、檢測(cè)圓形碰撞
圓形間碰撞檢測(cè)可以簡(jiǎn)單地通過(guò)兩圓心間距離與兩圓半徑之和的比較做判斷,當(dāng)兩圓心距離小于兩圓半徑之和時(shí)則發(fā)生碰撞。
如下圖:
所以我們首先需要做的是計(jì)算出兩圓心間的距離,這里我們將用到兩點(diǎn)間的距離公式,如下:
當(dāng)取得兩圓心間的距離之后將與兩圓半徑之和比較,如果距離小于半徑之和則返回true。
現(xiàn)在我們更新Interaect函數(shù)。
代碼如下:
function Intersect(circleA,circleB) { var dx = circleA.x-circleB.x; var dy = circleA.y-circleB.y; var distance = Math.sqrt(dx*dx+dy*dy); return distance < (circleA.radius + circleB.radius); }
3、動(dòng)畫循環(huán)
更新animation.js,這里我們替換Rect對(duì)象為Circle對(duì)象。
代碼如下:
function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(circleA,circleB)){ console.log('interact!!!!'); } if(mouse.x){ circleB.x = mouse.x; circleB.y = mouse.y; } circleA.draw(context); circleB.draw(context); }
4、初始化
更新Init.js ,初始化Circle對(duì)象A和B,最后開啟動(dòng)畫循環(huán)。
代碼如下:
window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); Capturemouse(canvas); circleA = new Circle(canvas.width/2,canvas.height/2,100); circleB = new Circle(100,100,100); drawAnimation(); }
3、基于矩形與圓形間的碰撞檢測(cè)
前面講解都是單一形狀間的碰撞檢測(cè),下面我們將檢測(cè)矩形和圓形間的碰撞。
1、檢測(cè)碰撞
和矩形檢測(cè)一樣,我們先看看沒有發(fā)生碰撞的四種情況。
如下圖:
以下是對(duì)這四種狀態(tài)的判斷:
Circle.y + Circle.radius < Rect.y Circle.x - Circle.radius > Rect.x + Rect.width Circle.y - Circle.radius > Rect.y + Rect.height Circle.x + Circle.radius < Rect.x 更新Interaect函數(shù),將沒有重疊的狀態(tài)“取反”,向該函數(shù)傳入Rect對(duì)象和Circle對(duì)象,當(dāng)Rect對(duì)象與Circle對(duì)象發(fā)生重疊將返回true。
代碼如下:
function Intersect(Rect,Circle) {
return !(Circle.y + Circle.radius < Rect.y ||
Circle.x - Circle.radius > Rect.x + Rect.width ||
Circle.y - Circle.radius > Rect.y + Rect.height ||
Circle.x + Circle.radius < Rect.x)
}
2、動(dòng)畫循環(huán)
更新animation.js,這里我們將circle對(duì)象跟隨鼠標(biāo)運(yùn)動(dòng),并檢測(cè)與固定位置的rect對(duì)象的碰撞。
代碼如下:
function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rect,circle)){ console.log('interact!!!!'); } if(mouse.x){ circle.x = mouse.x; circle.y = mouse.y; } circle.draw(context); rect.draw(context); }
3、初始化
更新Init.js ,初始化Circle對(duì)象和Rect對(duì)象,最后開啟動(dòng)畫循環(huán)。
代碼如下:
window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); Capturemouse(canvas); circle = new Circle(100,100,100); rect = new Rect(canvas.width/2,canvas.height/2,100,100); drawAnimation(); }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Html5如何實(shí)現(xiàn)Canvas動(dòng)畫基礎(chǔ)碰撞檢測(cè)”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
網(wǎng)站欄目:Html5如何實(shí)現(xiàn)Canvas動(dòng)畫基礎(chǔ)碰撞檢測(cè)
文章位置:http://bm7419.com/article28/psdhcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、網(wǎng)站收錄、微信小程序、電子商務(wù)、響應(yīng)式網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)