Тег canvas HTML
Добавить в избранное
Элемент canvas предоставляет HTML растровую поверхность для работы.
Он используется для рисования графики на веб-странице.
Тег HTML 5 <canvas> используется для рисования графики с помощью языка сценариев, такого как JavaScript.
Элемент <canvas> — это только контейнер для графики, для рисования графики вам понадобится язык сценариев.
Элемент <canvas> обеспечивает динамическую визуализацию 2D-фигур и растровых изображений с использованием сценариев.
Это низкоуровневая процедурная модель, которая обновляет растровое изображение и не имеет встроенной сцены.
В холсте есть несколько методов для рисования путей, прямоугольников, кругов, текста и добавления изображений.
Как создать HTML-холст?
Холст — это прямоугольная область на HTML-странице. Он указывается с элементом canvas. По умолчанию элемент <canvas> не имеет границ и содержимого, он подобен контейнеру.
<canvas id="mycanvas" width="200" height="100"> </canvas>
Пример тега canvas HTML 5
Ваш браузер не поддерживает тег canvas HTML5.
</canvas>
Примечание. Всегда необходимо указывать атрибут id и атрибут height & width, чтобы определить размер холста. Вы можете иметь несколько элементов canvas на одной HTML-странице.
Тег HTML canvas с JavaScript
canvas представляет собой двумерную сетку.
Координаты (0,0) определяют верхний левый угол холста. Параметры (0,0,200,100) используются для метода fillRect(). Этот параметр заполнит прямоугольник, начинающийся с верхнего левого угла (0,0), и нарисует прямоугольник 200 * 100.
Ваш браузер не поддерживает тег canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var cctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>
Рисование линии на холсте
Если вы хотите нарисовать прямую линию на холсте, вы можете использовать следующие два метода.
moveTo(x,y): используется для определения начальной точки линии.
lineTo(x,y): используется для определения конечной точки линии.
Если вы рисуете линию с начальной точкой (0,0) и конечной точкой (200,100), используйте метод штриха для рисования линии.
Ваш браузер не поддерживает тег canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var cctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
Рисование круга на холсте
Если вы хотите нарисовать круг на холсте, вы можете использовать метод arc():
Чтобы нарисовать круг на холсте HTML, используйте один из методов ink(), например, stroke() или fill().
Ваш браузер не поддерживает тег canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var cctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
Нанесение текста на холст
Существуют свойства и методы, используемые для рисования текста на холсте.
Метод fillText(text,x,y): используется для рисования заполненного текста на холсте. Похоже на жирный шрифт.
Метод strokeText(text,x,y): он также используется для рисования текста на холсте, но текст не заполняется.
Давайте посмотрим на пример метода fillText().
Извини! Ваш браузер не поддерживает тег canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var cctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello JavaTpoint",10,50);
</script>