JS Canvas分别为网格元素设置动画

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的开发人员网络上浏览了所有教程，所有动画都在单个对象上，而不是在网格中生成的对象上。

我当时以为我应该尝试存储网格并在以后影响它，但是我不确定该如何处理，我也不认为画布可以像这样工作。

我发现这几乎是我想要做的，但我不明白它是如何工作的： http : //codepen.io/soulwire/pen/Ffvlo

我现在可以很好地梳理它，如果有人可以引导我完成它，那就太好了:)

编辑：从那以后，我已经在点后面绘制了一个网格，我也想对此进行操作。 我仍然不了解上面链接的代码笔，这有点麻烦。

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(hx,hy); ctx.arc(hx,hy,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=hx-mx; var dy=hy-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(hx==h.startingX && hy==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=hx-h.startingX; dy=hy-h.startingY; hx-=dx/60; hy-=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>