本篇文章為大家展示了怎么在Html5中使用Canvas實(shí)現(xiàn)動(dòng)畫碰撞檢測(cè)功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、小程序開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。  3、平臺(tái)無關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

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！?。?/p>

• 檢測(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è)

說完矩形碰撞，我們?cè)賮砹牧膱A形碰撞，同樣我們將創(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)單地通過兩圓心間距離與兩圓半徑之和的比較做判斷，當(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();
}

上述內(nèi)容就是怎么在Html5中使用Canvas實(shí)現(xiàn)動(dòng)畫碰撞檢測(cè)功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：怎么在Html5中使用Canvas實(shí)現(xiàn)動(dòng)畫碰撞檢測(cè)功能-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article2/djpeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、域名注冊(cè)、網(wǎng)站收錄、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)