html тег <canvas> атрибут width


Атрибут width визначає ширину елемента<canvas> в пікселях.

автор: NagarD

Порада

Використовуйте атрибут height, щоб задати висоту елемента<canvas> в пікселях.

автор: Wsewlad
Нотатка

Кожен раз, коли висота або ширина полотна знову встановлюється, зміст полотна буде очищений

автор: Wsewlad

Синтаксис

<canvas width="pixels">

Атрибут width може отримувати єдине значення:

pixels

Визначає висоту полотна в пікселях. Без задання висота дорівнює "150".

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
4.0 2.0 3.1 9.0 9.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

width задає справжню ширину полотна в пікселях — це роздільність, а не CSS-розтягнення. Скрипт замальовує полотно і підписує розміри; без атрибутів канвас мав би типові 300×150.

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>

CSS

canvas {
    border: 1px solid #0172ad;
}

JS

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

ctx.fillStyle = '#0172ad';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';
ctx.font = '16px sans-serif';
ctx.fillText(canvas.width + '×' + canvas.height, 70, 55);
автор: NagarD

Різниця між HTML 4.01 та HTML5


Атрибут width для тегу <canvas> з’явився тільки у HTML5.

Різниця між XHTML та HTML



Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід