如何使用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繪製相對於點的直線？

回答

相關問題