在canvas上相对绘制线阵

Question

您好，相对于鼠标单击，我在 canvas 上绘制 3 条线时遇到了一些麻烦。

3 条线构成一个小笑脸。

因此，在我的代码中，我有一个名为parseRecordedLinePoints()的 function ，在此 function 中，它使每条线的点相对于我的鼠标，然后在 ZFCC790C72A86190DEC1ZB549D 上描边。

由于某种原因，当它被调用并抚摸 canvas 时，眼睛会互相抚摸。 （重叠）

我试图通过将 function 更改为：

    function parseRecordedLinePoints(Point, index, arr) {
      ctx.lineTo(Point.x, Point.y);
      ctx.stroke();
    }

function是这样画笑脸的，但不是相对的，线条相互连接。

这是当前作为片段的代码，因此您可以更好地查看。 你可以看到它是如何在错误的 position 中吸引眼球的，并将它们直接重叠在我的鼠标下方。 我试图让它相对正确地绘制笑脸。

代码：

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var cursorX = 100; //Example position X var cursorY = 0; //Example position Y var relX = 0; var relY = 0; //3 lines // A smiley face. var recordedLines = [{ Color: { r: 0, g: 50, b: 0 }, LinePoints: [{ x: 125, y: 370.2 }, { x: 125, y: 367.9 }, { x: 127.2, y: 365.7 }, { x: 128.4, y: 367.9 }, { x: 127.2, y: 370.2 }, { x: 125, y: 371.3 }, { x: 122.8, y: 370.2 }, { x: 121.7, y: 367.9 }, { x: 121.7, y: 364.6 }, { x: 123.9, y: 363.5 }, { x: 127.2, y: 363.5 }, { x: 128.4, y: 365.7 }, { x: 128.4, y: 369 }, { x: 126.1, y: 370.2 }, { x: 123.9, y: 369 }, { x: 122.8, y: 366.8 }, { x: 123.9, y: 364.6 }, { x: 127.2, y: 364.6 }, { x: 127.2, y: 367.9 }, { x: 125, y: 369 }, { x: 123.9, y: 366.8 }, { x: 123.9, y: 366.8 } ] }, { Color: { r: 100, g: 0, b: 0 }, LinePoints: [{ x: 168.4, y: 365.7 }, { x: 166.1, y: 366.8 }, { x: 163.9, y: 363.5 }, { x: 166.1, y: 362.4 }, { x: 168.4, y: 363.5 }, { x: 167.2, y: 365.7 }, { x: 163.9, y: 365.7 }, { x: 163.9, y: 362.4 }, { x: 165, y: 360.2 }, { x: 168.4, y: 360.2 }, { x: 169.5, y: 363.5 }, { x: 168.4, y: 365.7 }, { x: 165, y: 365.7 }, { x: 163.9, y: 363.5 }, { x: 165, y: 360.2 }, { x: 168.4, y: 360.2 }, { x: 168.4, y: 363.5 }, { x: 168.4, y: 364.6 } ] }, { Color: { r: 100, g: 0, b: 0 }, LinePoints: [{ x: 107.2, y: 377.9 }, { x: 109.5, y: 379 }, { x: 110.6, y: 381.3 }, { x: 112.8, y: 382.4 }, { x: 115, y: 384.6 }, { x: 117.2, y: 386.8 }, { x: 119.5, y: 387.9 }, { x: 122.8, y: 389 }, { x: 126.1, y: 390.2 }, { x: 129.5, y: 391.3 }, { x: 132.8, y: 391.3 }, { x: 136.1, y: 391.3 }, { x: 139.5, y: 392.4 }, { x: 142.8, y: 392.4 }, { x: 146.1, y: 392.4 }, { x: 149.5, y: 392.4 }, { x: 152.8, y: 392.4 }, { x: 156.1, y: 391.3 }, { x: 159.5, y: 390.2 }, { x: 161.7, y: 389 }, { x: 165, y: 389 }, { x: 167.2, y: 387.9 }, { x: 169.5, y: 386.8 }, { x: 171.7, y: 385.7 }, { x: 173.9, y: 384.6 }, { x: 176.1, y: 383.5 }, { x: 178.4, y: 382.4 }, { x: 179.5, y: 380.2 }, { x: 181.7, y: 379 }, { x: 182.8, y: 376.8 }, { x: 183.9, y: 375.7 } ] } ]; //---------------------------------- //var relativeARRAY = []; //recordedLines array, but relative to mouse. //var color = [{ r: 0, g: 0, b: 0 }]; function parseRecordedLinePoints(Point, index, arr) { relX = Point.x - arr[0].x; relY = Point.y - arr[0].y; ctx.lineTo(relX + cursorX, relY + cursorY); ctx.stroke(); } //---------------------------------- function parseRecordedLine(Line, index, arr) { const LinePoints = Line.LinePoints; //-- parse the x and y points of this line.. to make relative.. LinePoints.forEach(parseRecordedLinePoints); } //---------------------------------- c.addEventListener( "click", function(e) { cursorX = e.clientX; cursorY = e.clientY; ctx.moveTo(cursorX, cursorY); recordedLines.forEach(parseRecordedLine); }, false );

 <canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3;"></canvas>

Answer 1

不确定您是否必须将所有这些要点用于您的工作，但这是一个简化版本。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

let mouse = {
   x: null,
   y: null,
}

window.addEventListener('click', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
  drawFace();
});

function drawFace() {
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, 5, 0, Math.PI * 2);
  ctx.arc(mouse.x + 30, mouse.y, 5, 0, Math.PI * 2);  
  ctx.fill();
  ctx.closePath();
  
  ctx.strokeStyle = "black";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(mouse.x + 14, mouse.y + 9, 30, 0.3, Math.PI / 1.1)
  ctx.stroke();
  ctx.closePath(); 
}

对于您的代码，您需要在开始新抽奖时使用moveTo 。 lineTo 将从上一点继续绘制。 moveTo 拿起笔并将其移动到新的开始位置。