Что такое canvas в html:
Используется для создания графики, анимации и интерактивных визуализаций на веб-странице с помощью JavaScript. Он предоставляет разработчикам платформу для рисования различных фигур, линий, текста и изображений.
Атрибуты:
- width - ширина элемента в пикселях.
- height - высота элемента в пикселях.
Как прописать canvas в html:
<canvas id=
"myCanvas" width=
"300" height=
"200"></canvas>
Примеры использования
Рисование линии:
<canvas id=
"myCanvas" width=
"300" height=
"200"></canvas>
<script>
var
canvas = document.getElementById("myCanvas");
var
ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
</script>
Рисование прямоугольника:
<canvas id=
"myCanvas" width=
"300" height=
"200"></canvas>
<script>
var canvas = document.getElementById(
"myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
</script>
Рисование изображения:
canvas id=
"myCanvas" width=
"300" height=
"200"></canvas>
<script>
var
canvas = document.getElementById(
"myCanvas");
var
ctx = canvas.getContext(
"2d");
var
img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src =
"image.png";
</script>
Анимация объекта:
<canvas id=
"myCanvas" width=
"300" height=
"200"></canvas>
<script>
var
canvas = document.getElementById(
"myCanvas");
var
ctx = canvas.getContext(
"2d");
var
x = 0;
function animate() {
x++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
requestAnimationFrame(animate);
}
animate();
</script>
Создание графика:
<canvas id=
"myCanvas" width=
"600" height=
"400"></canvas>
<script>
var
canvas = document.getElementById(
"myCanvas");
var
ctx = canvas.getContext("2d");
var
data = [10, 20, 30, 40, 50];
var
colors = ["red", "orange", "yellow", "green", "blue"];
var
total = data.reduce(function(sum, value) { return sum + value; }, 0);
var
startAngle = 0;
for (var i = 0; i < data.length; i++) {
var
sliceAngle = 2 * Math.PI * data[i] / total;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2, canvas.height/2);
ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, startAngle, startAngle+sliceAngle);
ctx.closePath();
ctx.fill();
startAngle += sliceAngle;
}
</script>
Для чего использовать тег <canvas>
- Для игр с анимацией, графикой и интерактивностью.
- Для визуализации данных: диаграмм, графиков и схем.
-
Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
- Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
-
Для создания цифрового искусства.
-
Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
-
Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.
