Question

我尝试画一条500px长的线。

我的HTML：

<canvas id="conflict" width="500px" height:"500px">

</canvas>

我的Javascript：

$( document ).ready(function() {
    var conflict = document.getElementById("conflict");
    var conflict_context = conflict.getContext("2d");

    conflict_context.lineWidth = 3;
    conflict_context.strokeStyle = "rgb(0, 0, 0)";
    conflict_context.beginPath();
    conflict_context.moveTo(0, 0);
    conflict_context.lineTo(100, 100);
    conflict_context.stroke();

    // var text = "Hello, World!";
    // conflict_context.fillText(text, 40, 40);

    conflict_context.lineWidth = 1;
    conflict_context.strokeStyle = "rgb(50, 0, 0)";
    conflict_context.beginPath();
    conflict_context.moveTo(100, 0);
    conflict_context.lineTo(100, 500);
    conflict_context.stroke();
});

在this Jsfiddle中，我们可以看到500px线的长度比100 px长度长5倍。我怎样才能真正绘制500px长度的线？

根据@Archer的评论，我有一个拼写错误。身高应使用 = 符号定义，而不是：

HTML 5画布线长

0 个答案: