Canvas толщина линии
Есть код:
canvas = document.getElementById("graf");
ctx = canvas.getContext("2d");
ctx.strokeStyle="gray";
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width,canvas.height/2);
ctx.closePath();
В документации сказано что "ctx.lineWidth=1;" - толщина линии в пикселях, по факту линия шириной 2 px, причем если сделать "ctx.lineWidth=2;", то толщина линии не меняется, линия просто становится ярче (при дальнейшем увеличении толщина линии увеличивается). Я нашёл на форуме такую тему, но не могу пройти по ссылке т.к. на работе закрыты прокси) Подскажите как сделать линию толщиной в 1 px. Спасибо! |
Пример:
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="graf" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;" width="500" height="400"></canvas>
<script style="text/javascript">
var mashtab = 12;
function initGraf() {
var canvas, ctx;
canvas = document.getElementById("graf");
ctx = canvas.getContext("2d");
ctx.strokeStyle="#000";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width,canvas.height/2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(1, 0);
ctx.lineTo(1,canvas.height);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle="#000";
ctx.beginPath();
for (var y = canvas.height/2; y < canvas.height; y = y + mashtab) {
ctx.beginPath();
var tmp = Boolean(true)
for (var x = 5; x < canvas.width;) {
ctx.beginPath();
if (tmp) {
ctx.moveTo(x - 6, y);
}
ctx.lineTo(x, y);
x = parseInt(x + 5);
ctx.stroke();
ctx.closePath();
if (tmp) {
tmp = false;
} else {
tmp = true;
};
console.log(tmp)
}
};
ctx.stroke();
ctx.closePath();
}
initGraf();
</script>
</body>
</html>
Почему все линии толщиной 2 px? |
tsigel,
Видимая толщина в 2 пикселя происходит по причине интерполяции координат, потому что stroke обводит контур пути с обеих его сторон, т.е. половину толщины слева и половину справа. Например, ты рисуешь вертикальную линию с координатой x=100. Тогда в ширину она будет расположена между x=99.5 и x=100.5. Естественно, при этом захватывается два соседних пикселя, которые закрашиваются примерно с половинной непрозрачностью, и кажется что толщина линии равна 2. Поэтому, чтобы нарисовать линию, лежащую строго на одном пикселе, нужно использовать координаты вида N+0.5, где N - любое целое число. <body> <canvas id="canvas" width="200" height="200"></canvas> <script> var ctx = document.getElementById( "canvas" ).getContext( "2d" ); ctx.lineWidth = 1; // размытая линия ctx.moveTo( 50, 50 ); ctx.lineTo( 50, 150 ); // четкая линия ctx.moveTo( 150.5, 50 ); ctx.lineTo( 150.5, 150 ); ctx.stroke(); </script> </body> Вообще говоря, чтобы нарисовать четкую горизонтальную или вертикальную линию, постоянная координата должна быть равна N+0.5 при нечетной толщине линии, и N - при четной толщине. Или можно обойтись простыми прямоугольниками, рисуя линии функцией fillRect. |
Дзен-трансгуманист, спасибо!
|
Результаты чудес канваса, ещё раз спасибо!
|
Вооброжаемый помошник)
|
l-liava-l, Вообще дурная это хрень - удаление всех постов. =\
|
Цитата:
|
Восстановил сообщение от Дзена, ибо больно полезная штука, не знал. Может, кому полезно будет)
|
Дзен-трансгуманист,
очень полезно, спасибо. А на форуме вообще есть система закладок тем/комментов? А то уже далеко не в первый раз замечаю полезный коммент, а добавлять очередную закладку в браузер не хочется. |
| Часовой пояс GMT +3, время: 08:23. |