HTMLキャンバスの最初の行の幅が異なります

キャンバスの最初の行の幅が異なります。なぜか分からない。誰でも助けてくれますか？HTMLキャンバスの最初の行の幅が異なります

var x = document.documentElement.clientWidth; 
 
var y = document.documentElement.clientHeight; 
 

 
var canvas = document.getElementById('myCanvas'); 
 

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

 
context.lineWidth = 25; 
 

 
context.beginPath(); 
 
context.moveTo(0, 0); 
 
context.lineTo(x, 0); 
 
context.strokeStyle = '#2f444f'; 
 
context.stroke(); 
 
context.closePath(); 
 

 
context.beginPath(); 
 
context.moveTo(0, 25); 
 
context.lineTo(x, 25); 
 
context.strokeStyle = '#ff0000'; 
 
context.stroke(); 
 
context.closePath(); 
 

 
context.beginPath(); 
 
context.moveTo(0, 50); 
 
context.lineTo(x, 50); 
 
context.strokeStyle = '#5f0000'; 
 
context.stroke(); 
 
context.closePath(); 
 

 
context.beginPath(); 
 
context.moveTo(0, 75); 
 
context.lineTo(x, 75); 
 
context.strokeStyle = '#9f0000'; 
 
context.stroke(); 
 
context.closePath();

<body> 
 
<canvas id="myCanvas" width="1360" height="640" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
</body>

出典

2017-01-18 Mrg Gek

SOそれは、社内ソリューションです、私たちがして立ち往生しているルールを課すだけでフォーラムエンジンではありません。十分なテキストとコードがないことが判明した場合、理由があります。 –

幅や高さが異なっていますか？幅はすべて同じです。 – MannfromReno

@MannfromReno lineWidthは、キャンバスAPIの線の太さのプロパティの名前です。 –

ラインがy == 0であるので、あなたが細いラインを取得するので、幅の半分は、キャンバスの外に落ちます。

var x = document.documentElement.clientWidth; 
 
var y = document.documentElement.clientHeight; 
 

 
var canvas = document.getElementById('myCanvas'); 
 

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

 
     context.lineWidth = 25; 
 
     var w2 = Math.floor(context.lineWidth/2); 
 

 
     context.beginPath(); 
 
     context.moveTo(0, w2); 
 
     context.lineTo(x, w2); 
 
     context.strokeStyle = '#2f444f'; 
 
     context.stroke(); 
 
     context.closePath(); 
 

 
\t context.beginPath(); 
 
     context.moveTo(0, 25 + w2); 
 
     context.lineTo(x, 25 + w2); 
 
     context.strokeStyle = '#ff0000'; 
 
     context.stroke(); 
 
     context.closePath(); 
 

 
\t context.beginPath(); 
 
     context.moveTo(0, 50 + w2); 
 
     context.lineTo(x, 50 + w2); 
 
     context.strokeStyle = '#5f0000'; 
 
     context.stroke(); 
 
     context.closePath(); 
 

 
     context.beginPath(); 
 
     context.moveTo(0, 75 + w2); 
 
     context.lineTo(x, 75 + w2); 
 
     context.strokeStyle = '#9f0000'; 
 
     context.stroke(); 
 
     context.closePath();

<body> 
 
<canvas id="myCanvas" width="1360" height="640" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
</body>

出典

2017-01-18 21:48:02 Giladd

HTMLキャンバスの最初の行の幅が異なります

答えて

関連する問題