如何使用HTML帆布相对于点绘制线路

Question

我试图在随机点绘制某个设计，我正在用：

移动笔

ctx.moveTo(Math.floor((Math.random() * 300) + 1),Math.floor((Math.random() * 300) + 1);

(如果有更好的方法可以在(0,0(和(300,300(之间确定随机点，我对建议开放，但现在我想使用

ctx.lineTo(0,0)

为了实际绘制该行，但这只是绝对点，因此我该如何将笔移至随机点，然后移动，例如，从该点上升10分？

Answer 1

每次将其设置为每次引用时都会调用该方法的变量时，要生成新的随机整数。另外，更重要的是，您需要定义画布在lineTo()方法中绘制的要点，并在moveTo()方法中设置启动坐标。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var randPoint = Math.floor((Math.random() * 300) + 1);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(randPoint, randPoint);
ctx.stroke();