javascript - HTML 5 Canvas 上的 lineTo 无法正常工作

Question

我正在尝试学习 Canvas 。

我试图在 Canvas 上使用 moveTo() 和 lineTo() 绘制一些线条。

我给出的坐标和 Canvas 上渲染的点不匹配

我选取了尺寸为 500px X 500px 的 Canvas

对于 (0,0) 来说一切顺利。

对于所有其他点，它与坐标不匹配

对于 (300, 150)，它在 (500,500) 处绘制。

我不明白为什么会发生这种情况，因为如果我将 Canvas 大小设置为 t0 300px X 150px，它就会正确绘制

这是我的js

    var context = document.getElementById("myCanvas").getContext("2d");

    context.moveTo(0, 0);
    context.lineTo(100, 100);
    context.lineTo(100, 100);
    context.lineTo(200, 100);
    context.lineTo(300, 150);
    context.stroke();

jsfiddle here

谁能告诉我哪里错了

Answer 1

直接设置canvas元素的高度和宽度:
<canvas id="myCanvas" width="500" height="500"> </canvas>

fiddle :http://jsfiddle.net/nLUEX/2/