2 
<body>
    <canvas id="myCanvas" style="border:1px solid #000000; width: 800px;height:800px">
    </canvas>
</body>

私はこのように定義されたキャンバスを持っています。そして、ビューの準備ができたら、キャンバスのグラフィックの上に矢印を描きます。

window.onload = function() {

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, 800, 800);
    drawArrow(100, 100, 100, 20, ctx);
};



function drawArrow(x, y, w, h, ctxt) {

    var headWidth = 10;
    ctxt.beginPath();
    ctxt.strokeStyle = "#FF0";
    ctxt.moveTo(x, y + (h / 2));
    ctxt.lineTo(x + w, y + (h / 2));

    //To Draw Arrow Head
    ctxt.moveTo((x + w) - headWidth, y + (h / 2));
    ctxt.lineTo((x + w) - (2 * headWidth), y);
    ctxt.lineTo((x + w), y + (h / 2));
    ctxt.lineTo((x + w) - (2 * headWidth), y + h);
    ctxt.lineTo((x + w) - headWidth, y + (h / 2));

    //To Draw Arrow Tail
    ctxt.moveTo(x + (headWidth), y + (h / 2));
    ctxt.lineTo(x, y);
    ctxt.lineTo(x + (2 * headWidth), y + (h / 6));
    ctxt.lineTo(x + (2 * headWidth), y + (h * (3 / 4)));
    ctxt.lineTo(x, y + h);
    ctxt.lineTo(x + headWidth, y + (h / 2));

    ctxt.lineWidth = 1;
    ctxt.stroke();
}

1に設定ctxt.lineWidthしても、線幅が1に見えず、線が少し伸びています。誰かが私が間違っていることを指摘できますか？

4

3 に答える 3

1

これは、CSSを介して幅と高さを設定するためです。CSSを使用して幅と高さを変更すると、キャンバス要素のサイズは変更されますが、ピクセル密度は変更されません。これを行うには、canvas要素に.widthandプロパティを直接設定する必要があります。.height

次のように変更onloadし、要素の幅と高さのスタイルを削除します。

ライブデモ

window.onload = function() {

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // canvas width and height set here.
    c.width = 800;
    c.height = 800;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, 800, 800);
    drawArrow(100, 100, 100, 20, ctx);
};
于 2013-03-14T18:02:11.857 に答える
1 
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #000000;">
</canvas>

このように幅と高さを設定しても機能します。

于 2013-03-15T07:23:56.253 に答える
0

「ピクセル間」の座標を指定する必要があります。たとえば、からに線を引くと、からに線[0,0]を[10,0]引くよりも幅の広い線が得られ[0.5,0.5]ます[10.5,0.5]。

于 2013-03-14T18:17:14.610 に答える