JS帆布動畫網格元素單獨

Question

我用一個for循環產生的六邊形網格，我有一些問題

for (var i=0; i <= rows; i++) { 
     for (var j=0; j <= cols; j++) { 
      ctx.save(); 
      ctx.translate(0+i*distX, 0+j*distY); 
      drawHexagon(ctx); 
      ctx.fill(); 
      ctx.restore(); 
     } 
    } 

我的最終目標是創建六邊形網格，從搬走鼠標光標在頁面中移動時，具有影響區域。我無法弄清楚如何在每個六邊形之間繪製一條路徑，而且我還試圖對六邊形進行動畫處理。

我還是一個畫布新手，我瀏覽了Mozilla開發者網絡上的教程，所有的動畫都是單數對象，而不是網格中生成的對象。

我在想，我應該嘗試存儲網格並在稍後影響它，但我不確定我會如何去做，我也不認爲畫布是這樣的。

我發現這是相當多我想要做的，但我不明白它是如何工作： ​​

我很好，通過現在的梳理，如果任何人都可以走在我通過它那會是偉大的:)

編輯：我已經得到了一個網格繪製在點後面，我也想操縱它。我仍然不明白上面鏈接的codepen，這有點超過我的頭。

Answer 1

您的鏈接適用2個力量：鼠標靠近

1. 顆粒是擊退。更具體地說，如果粒子中心點靠近鼠標中心點，則粒子沿着兩個中心點之間的線被排斥。

2. 不靠近鼠標的粒子是吸引回到原來的位置。更具體地說，粒子沿着其當前中心點與其原始中心點之間的線移向其原始中心點。

數學是這樣的：

// Given the mouse centerpoint (mx,my) & particle's centerpoint (px,py) 

// calculate the difference between x's & y's 
var dx=px-mx; 
var dy=py-my; 

// You can repel the particle by increasing the 
// particle's position by a fraction of dx & dy 
px+=dx/100; 
py+=dy/100; 

// And you can attract the particle by decreasing the 
// particle's position by a fraction of dx & dy 
px-=dx/100; 
py-=dy/100; 

這裏的註釋（爲便於理解，去除寬鬆）代碼和演示：

// canvas related variables 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
ctx.fillStyle='skyblue'; 
 

 
// mouse related variables 
 
var PI2=Math.PI*2; 
 
var mouseRadius=75; // this is the mouse's radius of influence 
 
var mouseRadiusSquared=mouseRadius*mouseRadius; 
 
var mouseIsDown=false; 
 
var mx,my; 
 

 

 
// define a bunch of hex objects stored in an array 
 
var hexRadius=5; 
 
var hexPadding=5; 
 
var hexes=[]; 
 
for(var y=hexRadius;y<ch;y+=hexRadius*2+hexPadding){ 
 
    for(var x=hexRadius;x<cw;x+=hexRadius*2+hexPadding){ 
 
    hexes.push({startingX:x,startingY:y,x:x,y:y}); 
 
    }} 
 

 

 
// start a continuously running ticker loop 
 
requestAnimationFrame(tick); 
 

 

 
// listen for mouse events 
 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 

 

 
// draw every hex in its current position 
 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.beginPath(); 
 
    for(var i=0;i<hexes.length;i++){ 
 
    var h=hexes[i]; 
 
    ctx.moveTo(h.x,h.y); 
 
    ctx.arc(h.x,h.y,hexRadius,0,PI2); 
 
    ctx.closePath(); 
 
    } 
 
    ctx.fill(); 
 
} 
 

 
// create a continuously running ticker 
 
function tick(time){ 
 

 
    // update each hex position based on its 
 
    // position relative to the mouse 
 
    for(var i=0;i<hexes.length;i++){ 
 
    var h=hexes[i]; 
 
    // calculate if this hex is inside the mouse radius 
 
    var dx=h.x-mx; 
 
    var dy=h.y-my; 
 
    if(mouseIsDown && dx*dx+dy*dy<mouseRadiusSquared){ 
 
     // hex is inside mouseRadius 
 
     // so mouseDown repels hex 
 
     h.x+=dx/120; 
 
     h.y+=dy/120; 
 
    }else if(h.x==h.startingX && h.y==h.startingY){ 
 
     // hex is at startingX/Y & is not being repelled 
 
     // so do nothing 
 
    }else{ 
 
     // hex has moved off startingX/Y 
 
     // but is no longer being repelled 
 
     // so gravity attracts hex back to its startingX/Y 
 
     dx=h.x-h.startingX; 
 
     dy=h.y-h.startingY; 
 
     h.x-=dx/60; 
 
     h.y-=dy/60;    
 
    } 
 
    } 
 

 
    // redraw the hexes in their new positions 
 
    draw(); 
 

 
    // request another tick 
 
    requestAnimationFrame(tick); 
 
} 
 

 

 
// listen for mousedown events 
 
function handleMouseDown(e){ 
 

 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    // calculate the mouse position 
 
    mx=parseInt(e.clientX-offsetX); 
 
    my=parseInt(e.clientY-offsetY); 
 

 
    // set the mousedown flag 
 
    mouseIsDown=true; 
 
} 
 

 

 
// listen for mouseup events 
 
function handleMouseUp(e){ 
 

 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    // clear the mousedown flag 
 
    mouseIsDown=false; 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<h4>Press the mouse down to repel the particles.<br>Release to return particles to starting point.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>