キャンバスタグの描画線の問題＆＃8230;

StackOverflow https://stackoverflow.com/questions/1232146

  •  22-07-2019
  •  | 
  •  

質問

canvasタグがあり、その上に線を引きます。 キャンバスは正方形です。 「スペース」を使用します2行間のスペースを記録します。 キャンバスのサイズを記録するためにcanvasWidthとcanvasHightがありますが、実際にはこれらは同じ数字です。...320 

        var x=0;
        for (var i = 0; i < 5; i++) {
            x = parseInt(x + space);

            myCanvas.fillStyle = "rgb(200,0,0)";
            myCanvas.fillRect(x, 1, 1, canvasHeight);
            myCanvas.fillStyle = "rgb(0,200,0)";
            myCanvas.fillRect(1, x, canvasWidth, 1);

        }

キャンバス上のすべての赤い線を引くことができますが、 しかし、緑の線はキャンバス上に2本しか描画できず、他の線は表示できません。 try {} catchを使用しましたが、エラーが消えることはありません。

役に立ちましたか？

解決

どのブラウザを使用していますか

問題は、あなたが示したコードにあるようには見えません。それは私にとっては問題なく動作するからです。

ここに私のHTMLの例があります：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height="320" width="320" />

<script language="javascript">
var myCanvas = document.getElementById('myCanvas').getContext('2d');
var space = 10;
var x=0;
var canvasHeight = 320;
var canvasWidth = 320;
for (var i = 0; i < 5; i++) {
    x = parseInt(x + space);

    myCanvas.fillStyle = "rgb(200,0,0)";
    myCanvas.fillRect(x, 1, 1, canvasHeight);
    myCanvas.fillStyle = "rgb(0,200,0)";
    myCanvas.fillRect(1, x, canvasWidth, 1);

}
</script>

</body>
</html>

他のヒント

parseIntを使用する理由は、スペース変数が文字列型ですか？そうでない場合は、parseIntを削除してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top