Первая строка на холсте 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 холста. –

Поскольку линия в точке у == 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 имеет разную ширину

ответ

Смежные вопросы