несовместимым HTML5 холст результаты

У меня есть следующий HTML5 с JavaScript:несовместимым HTML5 холст результаты

<!DOCTYPE html> 
<html> 
<head> 
<style> 
canvas {width:200px; height:200px; 
     border: solid blue 1px } 
</style> 
</head> 
<body> 
<canvas id="myCanvas" ></canvas> 
<script> 
var canvas, ctx, i, tLineH = 70; 

canvas = document.getElementById('myCanvas'); 
ctx = canvas.getContext('2d'); 

for(i=0; i<50; i++){ 
    ctx.lineWidth = 1; 
    ctx.moveTo(i*3+0.5, tLineH-15); 
    ctx.lineTo(i*3+0.5, tLineH+15); 
    ctx.stroke(); 
} 

for(i=200; i<240; i+=4){ 
    ctx.lineWidth = 2; 
    ctx.moveTo(i, tLineH-30); 
    ctx.lineTo(i, tLineH-15); 
    ctx.stroke(); 
} 
</script> 
</body> 
</html>

который производит первое изображение. Если меняют порядок на петли второе изображение нарисовано! И если я изменю высоту холста до 300px , будет снято третье изображение!

Я бы отправлять изображения здесь, чтобы показать, что происходит, но у меня нет достаточно очков репутации, поэтому я положил их на https://www.dropbox.com/s/dun1vr4vjju3u7c/canvasTests.PNG?dl=0

Я надеюсь, что кто-то может объяснить, почему код производит различные результаты когда кажется, что рисунки должны быть одинаковыми.

Спасибо, Gerard

источник

2015-07-14 Gerard

Это потому, что порядок рисунков имеет значение на холсте :) – AkshayJ

Не изменять ширину и высоту холста с помощью CSS. В JavaScript, установить его с:

ctx.canvas.height = 200; 
ctx.canvas.width = 200;

Установка значения с помощью CSS будет растянуть полотно, при установке его с JavaScript изменяет его.

источник

2015-07-15 16:08:14 user2072826

Большое спасибо, это приятно знать. Почему, по вашему мнению, порядок этих двух циклов изменяет полученный чертеж? – Gerard

попробуйте использовать beginPath и closePath. Это может сыграть роль фактора. – user2072826

вы вызываете beginPath(), прежде чем нарисовать линию, и вы вызовете closePath() после того, как закончите рисовать линию. – user2072826

несовместимым HTML5 холст результаты

ответ

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