Question

我正在尝试从矩形的左上方到中心画一条线？矩形出现，但不是直线...

  <script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.strokeRect(10,10,300,175);
    ctx.moveTo(10,10);
    ctx.lineTo(140, 87);
 </script>

（在body标签内）

Answer 1

您需要在lineTo之后致电ctx.stroke();：

Canvas 2D API的CanvasRenderingContext2D.stroke（）方法使用非零缠绕规则以当前笔触样式笔触当前路径或给定路径。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


ctx.moveTo(10,10);
ctx.lineTo(140, 87);
ctx.stroke()

<canvas id="canvas">

Answer 2

请参见MDN：

Canvas 2D API的CanvasRenderingContext2D.lineTo（）方法将子路径中的最后一点与直线的x，y坐标相连（但实际上并未绘制）。

使用stroke()方法实际绘制线条

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10, 10, 300, 175);
ctx.moveTo(10, 10);
ctx.lineTo(140, 87);
ctx.stroke();

<canvas id=canvas></canvas>

我为什么不能画一条线？

2 个答案: