如何使用HTML Canvas绘制相对于点的直线？

我想提请随机点一定的设计，我移动笔：如何使用HTML Canvas绘制相对于点的直线？

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

（如果有确定和0,0之间（随机点）的一个更好的方法（300,300），我接受建议，但现在我想用

ctx.lineTo(0,0)

，以实际绘制该行，但这只是绝对点，所以我怎么能移动笔，以随机点，然后移动，为例如，从那一点起10分？

来源

2017-04-18 cooltop101

您可以使用其他变量跟踪位置。 –

@ibrahimmahrir所以，不要移动到一个随机点，然后使线相对，而是设置2个变量，并将笔移动到这些变量，然后执行'ctx.lineTo（x = 10，y + 10）;'或任何我需要（我是JS新手，所以我只是想弄清楚） – cooltop101

是的！究竟！！！ –

要生成一个新的随机整数每次您应该将其设置为一个变量，每次引用该变量时都会调用该方法。此外，更重要的是，您需要定义画布的点以在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();

来源

2017-04-18 02:05:44

如何使用HTML Canvas绘制相对于点的直线？

回答

相关问题