Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Canvas implementiert den Effektcode der dynamischen Ballüberlappung

Canvas implementiert den Effektcode der dynamischen Ballüberlappung

不言
Freigeben： 2018-07-03 11:36:33
Original
2293 Leute haben es durchsucht

In der JavaScript-Sportserie werden verschiedene Sportarten ausführlich vorgestellt, darunter auch Wandschlagsportarten. Wenn Sie jedoch Canvas zur Implementierung verwenden, ist dies eine andere Denkweise. In diesem Artikel wird der dynamische Ballüberlappungseffekt der Leinwand ausführlich vorgestellt. Schauen wir es uns gemeinsam an

Die vorherigen Wörter

In der JavaScript-Sportserie werden verschiedene Sportarten ausführlich vorgestellt, darunter auch Wandsportarten. 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

Generieren 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(&#39;canvas&#39;);
var H=300,W=500;
btn.onclick = function(){
 getBalls();
}
getBalls();
function getBalls(){
 canvas.height = H;
 if(canvas.getContext){
 var cxt = canvas.getContext(&#39;2d&#39;);
 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>
Nach dem Login kopieren

Zufällige Bewegung

Dann führen diese 50 Bälle zufällige Bewegungen aus und der Bewegungsstatus der Bälle muss gemeinsam aktualisiert werden mit dem Timer. 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(&#39;canvas&#39;);
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 50;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext(&#39;2d&#39;);
 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>
Nach dem Login kopieren

Wandkollisionserkennung

Als nächstes fügen Sie die Wand hinzu Kollisionserkennung des kleinen Balls Funktion: 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;
 }
}
Nach dem Login kopieren


当前浏览器不支持canvas，请更换浏览器后再试
<script>
btn.onclick = function(){history.go();}
var canvas = document.getElementById(&#39;canvas&#39;);
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 30;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext(&#39;2d&#39;);
 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 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(&#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>
Nach dem Login kopieren

Überlappungseffekt

canvas的合成属性globalCompositeOperation表示后绘制的图形怎样与先绘制的图形结合，属性值是字符串，可能值如下：
source-over(默认)：后绘制的图形位于先绘制的图形上方
source-in:后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明
source-out:后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明
source-atop:后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响
destination-over:后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见
destination-in:后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明
destination-out:后绘制的图形擦除与先绘制的图形重叠的部分
destination-atop:后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明
lighter:后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮
copy:后绘制的图形完全替代与之重叠的先绘制图形
xor:后绘制的图形与先绘制的图形重叠的部分执行"异或"操作
Nach dem Login kopieren

Füge den Überlappungseffekt der Kugeln zu „xor“ hinzu, was die endgültige Effektanzeige darstellt


当前浏览器不支持canvas，请更换浏览器后再试
<script>
btn.onclick = function(){history.go();}
var canvas = document.getElementById(&#39;canvas&#39;);
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 30;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext(&#39;2d&#39;);
 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 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(&#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.globalCompositeOperation = &#39;xor&#39;;
 cxt.closePath();
 cxt.fill(); 
 } 
 }
}
getBalls();
clearInterval(oTimer);
var oTimer = setInterval(function(){
 //更新小球运动状态
 updateBalls();
 //渲染小球
 renderBalls();
},50);
</script>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website !

Verwandte Empfehlungen:

Leinwand realisiert die Wirkung von Liebe und Regenbogenregen

Leinwand zeichnet verschiedene Grundgrafiken

Das obige ist der detaillierte Inhalt vonCanvas implementiert den Effektcode der dynamischen Ballüberlappung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
canvas
Quelle：php.cn
Vorheriger Artikel：Leinwand erzielt die Wirkung von Liebe und Regenbogenregen Nächster Artikel：Einführung in das Teilen von HTML5-Canvas-WeChat-Postern
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Die *zwei* Höhenwerte der Leinwand abrufen? Ich versuche, zwei Höhenwerte dieser Leinwand zu ermitteln. <canvaswidth="886"...
Aus 2024-04-05 09:32:33
0
1
1360
So exportieren Sie JPG-Dateien aus mehreren Leinwänden Ich habe mehrere Leinwände, die als Ebenen verwendet werden. canvasc1=backgroundimage.canv...
Aus 2024-04-03 21:02:43
0
1
319
Warum wird jedes Mal, wenn ich mein Vite React-Projekt speichere, ein neues Canvas-Element zum Seitenkörper hinzugefügt, anstatt das vorhandene Canvas-Element zu ersetzen? Ich versuche, ThreeJs zu lernen (ich bin auch neu in der Javascript-Webentwicklung). Nachd...
Aus 2024-03-30 09:57:49
0
1
396
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage