0

キャンバスを HTML で特定のサイズ (たとえば 800x600) に設定した後、スクリプトで塗りつぶされませんが、150x150 に設定すると塗りつぶされます。なぜそれが起こっているのですか？修正できますか？どんな助けでも大歓迎です。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Let's Draw!</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body onload="drawShape();">
        <canvas id="my_canvas" width="800" height="600">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
    </body>
</html>

Javascript:

function drawShape(){
    var canvas = document.getElementById('my_canvas');

    if (canvas.getContext){

        var ctx = canvas.getContext('2d');  // ctx = context

        ctx.fillStyle = "red";

        // Filled triangle
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(105,25);
        ctx.lineTo(25,105);
        ctx.fill();

        // Stroked triangle
        ctx.beginPath();
        ctx.moveTo(125,125);
        ctx.lineTo(125,45);
        ctx.lineTo(45,125);
        ctx.closePath();
        ctx.stroke();

    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}
4

1 に答える 1

0

800x600は比較的小さいので、canvasをサポートするすべての妥当なブラウザでサポートする必要があります。サイズの4倍のキャンバスが機能するはずです。どのブラウザ/OSを使用していますか？

于 2013-01-09T08:57:22.227 に答える