在畫布上生成行無法按預期工作

Question

我創建了一個簡單的腳本，它將在畫布上生成一行。 我想要達到的目標是使它從畫布的中間開始，到畫布的隨機點結束。

這是一個演示：

 const c = document.getElementById("canvas"); let ctx = c.getContext("2d"); var _x = window.getComputedStyle(c).width; var _y = window.getComputedStyle(c).height; //Get canvas size var x = (c.width = Number(_x.substring(0, _x.length - 2))); var y = (c.height = Number(_y.substring(0, _y.length - 2))); //Turn variables from string to int function getRandomPoint(x, y) { //Generate random point within the canvas var px = Math.floor(Math.random() * x); var py = Math.floor(Math.random() * y); var cord = [px, py]; return cord; } var cord = getRandomPoint(x, y); createLine(x, y, cord[0], cord[1]); function createLine(x, y, xk, yk) { ctx.beginPath(); ctx.moveTo(x / 2, y / 2); ctx.lineTo(xk, yk); ctx.stroke(); } 

 *{ margin:0; padding: 0; box-sizing: border-box; } body, html{ width:100%; height:100%; } body{ background-color:#f2f2f2; } /* CANVAS */ canvas{ height:400px; width:600px; margin: 20px auto; background-color:white; display: block; border: 1px solid #999; } 

 <canvas id="canvas"></canvas> 

如果您打開演示並看到空白的畫布，請嘗試刷新幾次。 有時該行會出現，而大多數時候不會。 同樣，它通常不會從畫布的中間開始。

我不知道為什么會這樣，這是我第一次嘗試使用畫布，所以也許我缺少明顯的東西。

Answer 1

您忘記將畫布的寬度和高度放在html屬性中：

 const c = document.getElementById('canvas'); let ctx = c.getContext('2d'); //Get canvas size var x = window.getComputedStyle(c).width; var y = window.getComputedStyle(c).height; //Turn variables from string to int x = Number(x.substring(0,x.length-2)); y = Number(y.substring(0,y.length-2)); function getRandomPoint(x,y){ //Generate random point within the canvas px = Math.floor(Math.random()*x); py = Math.floor(Math.random()*y); cord = [px, py]; return cord; } var cord = getRandomPoint(x,y); createLine(x,y,cord[0],cord[1]); function createLine(x,y,xk,yk){ ctx.moveTo(x/2,y/2); ctx.lineTo(xk,yk); ctx.stroke(); } 

 *{ margin:0; padding: 0; box-sizing: border-box; } body, html{ width:100%; height:100%; } body{ background-color:#f2f2f2; } /* CANVAS */ canvas{ height:400px; width:600px; margin: 20px auto; background-color:white; display: block; border: 1px solid #999; } 

 <canvas id="canvas" width="600" height="400"></canvas> 

Answer 2

您需要在JavaScript中聲明畫布的寬度和高度。

 const c = document.getElementById("canvas"); let ctx = c.getContext("2d"); var _x = window.getComputedStyle(c).width; var _y = window.getComputedStyle(c).height; //Get canvas size //Turn variables from string to int var x = (c.width = Number(_x.substring(0, _x.length - 2))); var y = (c.height = Number(_y.substring(0, _y.length - 2))); function getRandomPoint(x, y) { //Generate random point within the canvas var px = Math.floor(Math.random() * x); var py = Math.floor(Math.random() * y); var cord = [px, py]; return cord; } var cord = getRandomPoint(x, y); createLine(x, y, cord[0], cord[1]); function createLine(x, y, xk, yk) { ctx.beginPath(); ctx.moveTo(x / 2, y / 2); ctx.lineTo(xk, yk); ctx.stroke(); } 

 *{ margin:0; padding: 0; box-sizing: border-box; } body, html{ width:100%; height:100%; } body{ background-color:#f2f2f2; } /* CANVAS */ canvas{ height:400px; width:600px; margin: 20px auto; background-color:white; display: block; border: 1px solid #999; } 

 <canvas id="canvas"></canvas> 

Answer 3

您快要准備好了，您只是忘了在畫布HTML節點中添加寬度和高度

<canvas id="canvas" height=400 width=600></canvas>