Тег 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 id="myCanvas1" width="300" height="100" style="border:2px solid;">
Ваш браузер не поддерживает тег canvas HTML5.
</canvas>

Примечание. Всегда необходимо указывать атрибут id и атрибут height & width, чтобы определить размер холста. Вы можете иметь несколько элементов canvas на одной HTML-странице.

Тег HTML canvas с JavaScript

canvas представляет собой двумерную сетку.
Координаты (0,0) определяют верхний левый угол холста. Параметры (0,0,200,100) используются для метода fillRect(). Этот параметр заполнит прямоугольник, начинающийся с верхнего левого угла (0,0), и нарисует прямоугольник 200 * 100.

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">
Ваш браузер не поддерживает тег 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 id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег 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 id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег 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 id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
Извини! Ваш браузер не поддерживает тег 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>

Обсуждение закрыто.