Линии холста не прямые?

Я пытаюсь нарисовать элемент на холсте, но всякий раз, когда я рисую холст, линии оказываются выцветшими и не жирными. Я не понимаю, почему это происходит с моим кодом .. всякий раз, когда я пытаюсь с кодом из W3schools, все получается отлично. Вот мой код и изображение ниже.Линии холста не прямые?

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
    <title>Talk Walk</title> 
    <style type="text/css"> 
    #canvas { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     height: 500px; 
     width: 750px; 
     background-color: blue; 
    } 
    </style> 
</head> 
<body> 
    <canvas id="canvas"></canvas> 
    <script> 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext("2d"); 
    ctx.fillStyle = "green"; 
    ctx.fillRect(0,0,150,75); 
    </script> 
</body> 
</html>

источник

2014-10-29 John Smatch

Какой браузер вы используете? – pbaldauf

Проблема здесь состоит в том, что есть какая-то сглаживание происходит, когда вы рисуете прямоугольники.
Это происходит потому, что «край» зеленого прямоугольника не нарисован точно на пикселе. Как правило, вы бы вообще не видеть его, но так как вы вытянув холст с помощью CSS, чтобы установить его ширину и высоту, вы получите этот результат:

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "green"; 
 
ctx.fillRect(0,0,150,75);

#canvas { 
 
    height: 500px; 
 
    width: 750px; 
 
    background-color: blue; 
 
}

<canvas id="canvas"></canvas>

поправим используйте HTML атрибуты width и height, вместо CSS:

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "green"; 
 
ctx.fillRect(0,0,150,75);

#canvas { 
 
    background-color: blue; 
 
}

<canvas id="canvas" height="500" width="750"></canvas>

Это правильно масштабирует холст, поэтому сглаживание (пока все еще там, если вы увеличиваете масштаб) не масштабируется.

источник

2014-10-29 10:37:43 Cerbrus

Линии холста не прямые?

ответ

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