21.12.2012, 13:41
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
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.
Спасибо! |
|
21.12.2012, 14:52
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Пример:
<!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?
|
|
21.12.2012, 18:34
|
 |
√₋̅₁̅
|
|
Регистрация: 18.06.2012
Сообщений: 385
|
|
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.
__________________
Гейзенберг, возможно, читал этот тред.
Последний раз редактировалось Дзен-трансгуманист, 21.12.2012 в 19:10.
|
|
22.12.2012, 10:13
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Дзен-трансгуманист, спасибо!
|
|
27.12.2012, 11:20
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Последний раз редактировалось tsigel, 14.01.2013 в 15:05.
|
|
03.09.2014, 17:45
|
|
Профессор
|
|
Регистрация: 14.03.2012
Сообщений: 1,808
|
|
|
Вооброжаемый помошник)
__________________
Научу себя плохому 
|
|
03.09.2014, 17:51
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,495
|
|
|
l-liava-l, Вообще дурная это хрень - удаление всех постов. =\
__________________
29375, 35
|
|
03.09.2014, 18:01
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Цитата:
|
|
Результаты чудес канваса, ещё раз спасибо!
|
Раньше там была интерактивная карта России... эх Это почти что первый мой ООП код. |
|
10.09.2014, 23:30
|
 |
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
|
Восстановил сообщение от Дзена, ибо больно полезная штука, не знал. Может, кому полезно будет)
|
|
11.09.2014, 00:20
|
 |
Профессор
|
|
Регистрация: 23.12.2013
Сообщений: 1,856
|
|
|
Дзен-трансгуманист,
очень полезно, спасибо.
А на форуме вообще есть система закладок тем/комментов? А то уже далеко не в первый раз замечаю полезный коммент, а добавлять очередную закладку в браузер не хочется.
|
|
|
|
