В современной веб-разработке Canvas и SVG — две широко используемые технологии рисования. Все они предоставляют способ представления графики на веб-странице, но реализация, использование и применимые сценарии, стоящие за ними, различаются. В этом блоге мы обсудим Canvas и SVG и предоставим руководство по их использованию.
Холст
Canvas — это элемент HTML5, который обеспечивает способ рисования графики на основе пикселей. Он поддерживает прямое рисование 2D-графики, включая линии, прямоугольники, круги, дуги, текст и изображения и многое другое. Canvas широко используется для динамического создания изображений, динамических диаграмм, визуализации данных и разработки игр.
Создайте элемент холста
Во-первых, нам нужно создать элемент Canvas в нашем HTML-документе. Мы можем создать элемент Canvas с помощью следующего кода:
<canvas id="myCanvas" width="500" height="500"></canvas>
Этот код создает элемент Canvas и задает для его идентификатора значение «myCanvas». Элемент имеет размер по умолчанию 500 пикселей в ширину и 500 пикселей в высоту. Мы можем использовать таблицы стилей CSS для изменения стиля элемента Canvas, например, для установки таких свойств, как ширина и высота.
рисовать графику
После того, как мы создали элемент Canvas, мы можем использовать JavaScript для рисования на нем. Canvas API очень мощный и многофункциональный.Вы можете рисовать различные фигуры, настраивать цвета и стили, добавлять текст и изображения и многое другое. Вот некоторые основные операции рисования:
// 在 Canvas 上绘制直线
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 200);
context.stroke();
// 在 Canvas 上绘制矩形
context.beginPath();
context.rect(50, 50, 100, 100);
context.fillStyle = "red";
context.fill();
// 在 Canvas 上绘制圆形
context.beginPath();
context.arc(250, 250, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
// 在 Canvas 上绘制文本
context.font = "30px Arial";
context.fillText("Hello, Canvas!", 50, 100);
// 在 Canvas 上绘制图像
var image = new Image();
image.src = "myImage.png";
image.onload = function() {
context.drawImage(image, 0, 0);
}
расширенный рисунок
В дополнение к основным графическим операциям Canvas API также поддерживает некоторые расширенные функции рисования. Например, мы можем использовать кривые Безье для рисования плавных кривых:
// 在 Canvas 上绘制贝塞尔曲线
context.beginPath();
context.moveTo(0, 0);
context.bezierCurveTo(100, 50, 200, 50, 300, 0);
context.strokeStyle = "green";
context.stroke();
Мы также можем создавать объекты градиента и эффекты теней, чтобы улучшить визуализацию графика:
// 创建两种颜色的线性渐变
var gradient = context.createLinearGradient(0, 0, 500, 500);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
// 绘制一个矩形并应用渐变
context.beginPath();
context.rect(50, 50, 400, 400);
context.fillStyle = gradient;
context.fill();
// 应用阴影效果
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
SVG
В отличие от Canvas, SVG — это технология рисования на основе векторной графики, которая использует язык разметки XML для определения графики и элементов. Используя SVG, мы можем создавать масштабируемую графику, а это значит, что мы можем масштабировать графику без потери ее четкости и детализации. SVG подходит для графики, отображаемой в статическом виде, такой как значки, цифровые диаграммы, векторная графика и т. д.
Создание SVG-элементов
В отличие от Canvas, нам не нужна специальная разметка для определения элементов SVG, мы используем обычную разметку HTML. Следующий фрагмент кода создает элемент SVG:
<svg id="mySvg" width="500" height="500"></svg>
Подобно Canvas, мы можем использовать таблицы стилей CSS для изменения стиля элементов SVG, например, для установки таких атрибутов, как ширина, высота и графические стили.
рисовать графику
В отличие от Canvas, SVG основан на векторной графике, которая определяет, какие фигуры и элементы могут быть нарисованы в ней. SVG поддерживает прямое рисование фигур, текста, изображений и многого другого. Вот некоторые основные операции рисования:
<!-- 在 SVG 上绘制直线 -->
<svg width="500" height="500">
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2"/>
</svg>
<!-- 在 SVG 上绘制矩形 -->
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" fill="red"/>
</svg>
<!-- 在 SVG 上绘制圆形 -->
<svg width="500" height="500">
<circle cx="250" cy="250" r="50" fill="blue"/>
</svg>
<!-- 在 SVG 上绘制文本 -->
<svg width="500" height="500">
<text x="50" y="100" font-size="30" font-family="Arial">Hello, SVG!</text>
</svg>
<!-- 在 SVG 上绘制图像 -->
<svg width="500" height="500">
<image href="myImage.png" x="0" y="0" width="500" height="500"/>
</svg>
расширенный рисунок
Подобно Canvas, SVG также поддерживает некоторые расширенные функции рисования, включая графические преобразования, градиенты, фильтры и многое другое. Например, мы можем использовать матричные преобразования для поворота, масштабирования или перемещения фигур:
<!-- 在 SVG 上绘制旋转的矩形 -->
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" fill="red">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>
Мы также можем создавать различные типы эффектов градиента, такие как линейные градиенты и радиальные градиенты:
<!-- 在 SVG 上绘制渐变矩形 -->
<svg width="500" height="500">
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="400" height="400" fill="url(#myGradient)"/>
</svg>
Подведем итог
Canvas и SVG — это технологии для рисования графики на веб-страницах. Canvas предоставляет способ рисования графики на основе пикселей, подходящий для таких областей, как динамически генерируемые изображения, динамические диаграммы, визуализация данных и разработка игр. SVG — это технология, основанная на векторной графике, которая использует язык разметки XML для определения графики и элементов и подходит для графики, отображаемой статически, например, значков, цифровых диаграмм, векторной графики и т. д. Мы можем использовать Canvas API и элементы SVG для рисования различных форм, текста и изображений, а также применять различные расширенные функции рисования для улучшения визуализации графики.