Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Свойство CanvasRenderingContext2D
.lineWidth
, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, Infinity
и NaN
игнорируются.
См. также главу Applying styles and color в Canvas Tutorial.
Синтаксис
ctx.lineWidth = value;
Значения
value
- Число, задающее толщину линии в пикселах. Ноль, отрицательные числа,
Infinity
иNaN
игнорируются.
Примеры
Использование свойства lineWidth
Ниже представлен простой фрагмент кода, использующий lineWidth.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineTo(100, 100); ctx.stroke();
Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineTo(100, 100); ctx.stroke();</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
WHATWG HTML Living Standard Определение 'CanvasRenderingContext2D.lineWidth' в этой спецификации. |
Живой стандарт |
Совместимость с браузерами
Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базовая поддержка | (Да) | (Да) | (Да) | (Да) | (Да) |
Возожность | Android | Chrome для Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Базовая поддержка | (Да) | (Да) | (Да) | (Да) | (Да) | (Да) |
Особенности WebKit/Blink
- В браузерах на базе WebKit и Blink, помимо этого свойства также поддерживается нестандартный метод
ctx.setLineWidth()
.
Особенности Gecko
- В Gecko ниже 2.0 версии, при задании lineWidth отрицательного значения выбрасывалось исключение.
Смотрите также
- Интерфейс, предоставляющий это свойство:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineCap
CanvasRenderingContext2D.lineJoin