HTML5とJSを使用してグリッドを構築し始めましたが、これは機能しません。

-2

明らかにこれは機能しません。なぜなら、私はHTML5を初めて使用しているから、理由はわかりません。私はキャンバス上にいくつかの垂直線を取得する必要があります。アイデアはキャンバス画面上にグリッドを作成することですが、これは何らかの理由でラインを作成しているようには見えません。HTML5とJSを使用してグリッドを構築し始めましたが、これは機能しません。

<!DOCTYPE html> 
<html> 
<head> 
<title>Test App</title> 


<style> 
body { 
    padding:0px; 
    margin:0px; 

} 
canvas { 
    border:1px solid #000000; 

} 

</style> 
</head> 

<body> 
<canvas id="gc" width="800" height="600"></canvas> 

<script> 
    function buildGrid() { 
     alert("Start!"); 
     var gameCanvas = document.getElementById("gc"); 
     var ctx = gameCanvas.getContext("2d"); 

     for (x=5; x<gameCanvas.width; x+=5) { 
      console.log(x); 
      ctx.moveTo(x, 10); 
      ctx.lineTo(x, gameCanvas.length); 
     } 




     ctx.strokeStyle = "black"; 
     ctx.stroke(); 


    } 
    window.onload = buildGrid(); 
</script> 

</body> 
</html>

出典

2016-03-25 user3919794

これは単なる誤植です。投票を終了する。あなたの投稿を削除してください。 – GameAlchemist

代わりの

ctx.lineTo(x, gameCanvas.length);

何gameCanvas.lengthはありません

ctx.lineTo(x, gameCanvas.height);

https://jsfiddle.net/9as7mwb6/6/

出典

2016-03-25 17:45:06 synapse

あなたは 'ctx.lineTo（x、gameCanvas.height）' ;-)と言っていました – markE

はいありがとう...！ – synapse

を試してみてください。 gameCanvas.heightである必要があります。

はしかし、私はあなたの代わりに、ぼやけのエッジがシャープにするために、各x値に0.5を追加すべきだと思う：

for (var x = 5; x < gameCanvas.width; x += 5) { 
    console.log(x); 
    ctx.moveTo(x + 0.5, 10); 
    ctx.lineTo(x + 0.5, gameCanvas.height); 
}

出典

2016-03-25 17:49:28 Xufox

あなたはまさに私はそれを信じることができません。ありがとうございます！ – user3919794

あるいは 'ctx.translate（0.5、0.5）;'を使ってコンテキストをあらかじめ翻訳します。これは、より速く、あまり混乱させないでしょう。 – K3N

HTML5とJSを使用してグリッドを構築し始めましたが、これは機能しません。

答えて

関連する問題