编辑 lineTo 点（在 canvas 中）

Question

我想移动lineTo分。
怎么做？
我是 Canvas.
的新手我举个例子 Path.

这是我的例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
var line = ctx.lineTo(300, 100);
ctx.lineTo(70, 100);
ctx.lineTo(20, 20);
ctx.fillStyle = "red";
ctx.fill();
setTimeout(function() {
  /*
            I want something like this:
            line.editpoints(300, 150);
            */
}, 3000);

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

Answer 1

嗯，canvas顾名思义，就是一个canvas（就像画中的）。你可以在上面画画，但你不能在上面移动东西，因为它不是“动态的”。

不过，您可以做的是清除它，然后在顶部的不同位置绘制。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function clearContext(ctx) {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawTriangle(offsetX = 0, offsetY = 0) {
  ctx.beginPath();
  ctx.moveTo(offsetX + 20, offsetY + 20);
  var line = ctx.lineTo(offsetX + 300, offsetY + 100);
  ctx.lineTo(offsetX + 70, offsetY + 100);
  ctx.lineTo(offsetX + 20, offsetY + 20);
  ctx.fillStyle = "red";
  ctx.fill();
}
drawTriangle();

setTimeout(function() {
  clearContext(ctx);
  drawTriangle(50, 50);
}, 3000);

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

编辑 lineTo 点（在 canvas 中）

Edit lineTo points (in canvas)

html

javascript

html5-canvas