suchen

Heim >Web-Frontend >js-Tutorial >Dynamischer Ballüberlappungseffekt der Leinwand

Dynamischer Ballüberlappungseffekt der Leinwand

高洛峰
高洛峰Original
2017-02-09 17:16:491239Durchsuche

Vorherige Wörter

In der JavaScript-Sportserie werden verschiedene Sportarten ausführlich vorgestellt, darunter auch Wandkollisionssportarten. Wenn Sie jedoch Canvas zur Implementierung verwenden, ist dies eine andere Denkweise. In diesem Artikel wird der Überlappungseffekt dynamischer Leinwandbälle ausführlich vorgestellt

statische Bälle

Erzeugen Sie zunächst 50 statische Bälle mit zufälligem Radius und zufälliger Position

<button id="btn">按钮</button><canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas，请更换浏览器后再试</canvas><script>var canvas = document.getElementById('canvas');var H=300,W=500;
btn.onclick = function(){
    getBalls();
}
getBalls();function getBalls(){
    canvas.height = H;    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < 50; i++){            var tempR = Math.floor(Math.random()*255);            var tempG = Math.floor(Math.random()*255);            var tempB = Math.floor(Math.random()*255);
            cxt.fillStyle = &#39;rgb(&#39; + tempR + &#39;,&#39; + tempG + &#39;,&#39; + tempB + &#39;)&#39;;            var tempW = Math.floor(Math.random()*W);            var tempH = Math.floor(Math.random()*H);            var tempR = Math.floor(Math.random()*50);
            cxt.beginPath();
            cxt.arc(tempW,tempH,tempR,0,Math.PI*2);
            cxt.fill();
        }
    }    
}</script>

Zufällige Bewegung

Als nächstes bewegen sich diese 50 Bälle zufällig und die Bewegung der Bälle muss in Verbindung aktualisiert werden mit dem Timer-Status. Zu diesem Zeitpunkt muss der obige Code neu geschrieben werden 

<button id="btn">更新</button><canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas，请更换浏览器后再试</canvas><script>btn.onclick = function(){history.go();}var canvas = document.getElementById('canvas');//存储画布宽高var H=300,W=500;//存储小球个数var NUM = 50;//存储小球var balls = [];function getBalls(){    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < NUM; i++){            var tempR = Math.floor(Math.random()*255);            var tempG = Math.floor(Math.random()*255);            var tempB = Math.floor(Math.random()*255);            var tempColor = &#39;rgb(&#39; + tempR + &#39;,&#39; + tempG + &#39;,&#39; + tempB + &#39;)&#39;;            var tempX = Math.floor(Math.random()*W);            var tempY = Math.floor(Math.random()*H);            var tempR = Math.floor(Math.random()*30+20);            var tempBall = {
                x:tempX,
                y:tempY,
                r:tempR,
                stepX:Math.floor(Math.random() * 4 -2),
                stepY:Math.floor(Math.random() * 4 -2),
                color:tempColor,
                disX:Math.floor(Math.random() * 3 -1),
                disY:Math.floor(Math.random() * 3 -1)
            };
            balls.push(tempBall);
        }
    }    
}function updateBalls(){    for(var i = 0; i < balls.length; i++){
        balls[i].stepY += balls[i].disY;
        balls[i].stepX += balls[i].disX;
        balls[i].x += balls[i].stepX;
        balls[i].y += balls[i].stepY;                 
    }
}function renderBalls(){    //重置画布高度，达到清空画布的效果    canvas.height = H;    
    if(canvas.getContext){        var cxt = canvas.getContext(&#39;2d&#39;);        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();   
        }        
    }

}
getBalls();
clearInterval(oTimer);var oTimer = setInterval(function(){    //更新小球运动状态    updateBalls();    //渲染小球    renderBalls();
},50);</script>

Wandkollisionserkennung

Als nächstes hinzufügen Die Ball-Wand-Kollisionserkennungsfunktion: Wenn der Ball auf die Wand trifft, wechselt er in die entgegengesetzte Richtung 

function bumpTest(ele){    //左侧
    if(ele.x <= ele.r){
        ele.x = ele.r;
        ele.stepX = -ele.stepX;
    }    //右侧
    if(ele.x >= W - ele.r){
        ele.x = W - ele.r;
        ele.stepX = -ele.stepX;
    }    //上侧
    if(ele.y <= ele.r){
        ele.y = ele.r;
        ele.stepY = -ele.stepY;
    }    //下侧
    if(ele.y >= H - ele.r){
        ele.y = H - ele.r;
        ele.stepY = -ele.stepY;
    }
}


当前浏览器不支持canvas，请更换浏览器后再试
<script>btn.onclick = function(){history.go();}var canvas = document.getElementById('canvas');//存储画布宽高var H=300,W=500;//存储小球个数var NUM = 30;//存储小球var balls = [];function getBalls(){    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < NUM; i++){            var tempR = Math.floor(Math.random()*255);            var tempG = Math.floor(Math.random()*255);            var tempB = Math.floor(Math.random()*255);            var tempColor = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';            var tempR = Math.floor(Math.random()*30+20);            var tempX = Math.floor(Math.random()*(W-tempR) + tempR);            var tempY = Math.floor(Math.random()*(H-tempR) + tempR);            
            var tempBall = {
                x:tempX,
                y:tempY,
                r:tempR,
                stepX:Math.floor(Math.random() * 13 -6),
                stepY:Math.floor(Math.random() * 13 -6),
                color:tempColor
            };
            balls.push(tempBall);
        }
    }    
}function updateBalls(){    for(var i = 0; i < balls.length; i++){
        balls[i].x += balls[i].stepX;
        balls[i].y += balls[i].stepY; 
        bumpTest(balls[i]);
    }
}function bumpTest(ele){    //左侧
    if(ele.x &lt;= ele.r){
        ele.x = ele.r;
        ele.stepX = -ele.stepX;
    }    //右侧
    if(ele.x &gt;= W - ele.r){
        ele.x = W - ele.r;
        ele.stepX = -ele.stepX;
    }    //上侧
    if(ele.y &lt;= ele.r){
        ele.y = ele.r;
        ele.stepY = -ele.stepY;
    }    //下侧
    if(ele.y &gt;= H - ele.r){
        ele.y = H - ele.r;
        ele.stepY = -ele.stepY;
    }
}function renderBalls(){    //重置画布高度，达到清空画布的效果
    canvas.height = H;    
    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();   
        }        
    }

}
getBalls();
clearInterval(oTimer);var oTimer = setInterval(function(){    //更新小球运动状态    updateBalls();    //渲染小球    renderBalls();
},50);</script>

Überlappungseffekt

Das zusammengesetzte Attribut globalCompositeOperation von Canvas gibt an, wie die später gezeichneten Grafiken mit den zuerst gezeichneten Grafiken kombiniert werden. Der Attributwert ist eine Zeichenfolge ​​sind wie folgt: 

source-over(默认)：后绘制的图形位于先绘制的图形上方
source-in:后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明
source-out:后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明
source-atop:后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响
destination-over:后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见
destination-in:后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明
destination-out:后绘制的图形擦除与先绘制的图形重叠的部分
destination-atop:后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明
lighter:后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮
copy:后绘制的图形完全替代与之重叠的先绘制图形 
xor:后绘制的图形与先绘制的图形重叠的部分执行"异或"操作

Fügen Sie den überlappenden Effekt der Kugeln zu „xor“ hinzu, was den endgültigen Effekt ergibt display 


当前浏览器不支持canvas，请更换浏览器后再试
<script>btn.onclick = function(){history.go();}var canvas = document.getElementById('canvas');//存储画布宽高var H=300,W=500;//存储小球个数var NUM = 30;//存储小球var balls = [];function getBalls(){    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < NUM; i++){            var tempR = Math.floor(Math.random()*255);            var tempG = Math.floor(Math.random()*255);            var tempB = Math.floor(Math.random()*255);            var tempColor = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';            var tempR = Math.floor(Math.random()*30+20);            var tempX = Math.floor(Math.random()*(W-tempR) + tempR);            var tempY = Math.floor(Math.random()*(H-tempR) + tempR);            
            var tempBall = {
                x:tempX,
                y:tempY,
                r:tempR,
                stepX:Math.floor(Math.random() * 21 -10),
                stepY:Math.floor(Math.random() * 21 -10),
                color:tempColor
            };
            balls.push(tempBall);
        }
    }    
}function updateBalls(){    for(var i = 0; i < balls.length; i++){
        balls[i].x += balls[i].stepX;
        balls[i].y += balls[i].stepY; 
        bumpTest(balls[i]);
    }
}function bumpTest(ele){    //左侧
    if(ele.x &lt;= ele.r){
        ele.x = ele.r;
        ele.stepX = -ele.stepX;
    }    //右侧
    if(ele.x &gt;= W - ele.r){
        ele.x = W - ele.r;
        ele.stepX = -ele.stepX;
    }    //上侧
    if(ele.y &lt;= ele.r){
        ele.y = ele.r;
        ele.stepY = -ele.stepY;
    }    //下侧
    if(ele.y &gt;= H - ele.r){
        ele.y = H - ele.r;
        ele.stepY = -ele.stepY;
    }
}function renderBalls(){    //重置画布高度，达到清空画布的效果
    canvas.height = H;    
    if(canvas.getContext){        var cxt = canvas.getContext('2d');        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.globalCompositeOperation = &#39;xor&#39;;
            cxt.closePath();
            cxt.fill();   
        }        
    }

}
getBalls();
clearInterval(oTimer);var oTimer = setInterval(function(){    //更新小球运动状态    updateBalls();    //渲染小球    renderBalls();
},50);</script>

Weitere Artikel zum dynamischen Ballüberlappungseffekt der Leinwand finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Aufbau einer ArcGIS API für die JavaScript-Entwicklungsumgebung und erste BeispieldemoNächster Artikel：Aufbau einer ArcGIS API für die JavaScript-Entwicklungsumgebung und erste Beispieldemo

In Verbindung stehende Artikel

Mehr sehen