白骑士的HTML教学高级篇 3.3 SVG与Canvas

        在现代网页开发中，矢量图形和动态绘图变得越来越重要。HTML5引入了两种强大的图形技术：SVG（Scalable Vector Graphics）和Canvas，它们分别适用于不同的绘图需求。SVG是一种基于XML的矢量图形标准，非常适合用于需要精确控制的可缩放图形；而Canvas则是一种基于像素的绘图技术，适合用于动态图形和动画。在本篇博客中，我们将探讨如何使用SVG和Canvas绘图，并讨论如何为它们添加动画与交互效果。

使用SVG绘图

什么是SVG？

        SVG是一种用于描述二维矢量图形的语言，基于XML格式。它非常适合需要高精度和可缩放的图形，如图标、图表和复杂的插图。基本用法如下：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

• 效果：这个简单的SVG代码创建了一个蓝色的圆形，位于200x200像素的画布中央。

绘制基本图形

        SVG允许你绘制各种基本图形，如矩形、圆形、线条和多边形。

绘制矩形

<svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100" fill="green" />
</svg>

绘制线条

<svg width="200" height="200">
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
</svg>

绘制多边形

<svg width="200" height="200">
    <polygon points="50,50 150,50 100,150" fill="red" />
</svg>

添加文本与样式

        SVG不仅可以绘制图形，还可以添加文本和样式，使图形更加丰富。

添加文本

<svg width="200" height="200">
    <text x="50" y="100" font-family="Verdana" font-size="20" fill="blue">Hello, SVG!</text>
</svg>

应用样式

        你可以使用‘style‘标签或‘class‘类为SVG元素应用样式。

<svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100" class="my-rect" />
    <style>
        .my-rect {
            fill: orange;
            stroke: black;
            stroke-width: 5;
        }
    </style>
</svg>

使用Canvas绘图

什么是Canvas？

        Canvas是HTML5引入的一个用于绘制图形的元素。它提供了一个基于像素的绘图区域，适合用于生成图表、游戏图形以及其他需要实时渲染的内容。基本用法如下：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 100);
</script>

• 效果：上述代码在Canvas元素中绘制了一个蓝色矩形。

绘制基本图形

        Canvas提供了丰富的绘图API，用于绘制各种基本图形。

绘制圆形

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

绘制线条

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'red';
ctx.stroke();

添加文本与图像

        Canvas也可以绘制文本和图像，使得图形内容更加丰富。

绘制文本

ctx.font = '20px Arial';
ctx.fillStyle = 'purple';
ctx.fillText('Hello, Canvas!', 50, 50);

绘制图像

const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0, 200, 200);
};

动画与交互

SVG中的动画与交互

        SVG支持基于CSS和JavaScript的动画与交互，使得图形可以动态变化。

CSS动画

<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

JavaScript交互

<svg width="200" height="200" onclick="alert('SVG clicked!')">
    <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

Canvas中的动画与交互

        Canvas的动画通常通过‘requestAnimationFrame‘函数和JavaScript的绘图API实现。

创建简单动画

let x = 0;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 50, 100, 100); // 绘制矩形
    x += 1; // 更新位置
    requestAnimationFrame(draw); // 请求下一帧
}

draw(); // 开始动画

添加交互

canvas.addEventListener('click', function() {
    alert('Canvas clicked!');
});

总结

        通过本篇博客，我们详细介绍了如何使用SVG和Canvas进行绘图，以及如何为这些图形添加动画和交互效果。SVG适用于需要精确控制和高可缩放性的静态图形，而Canvas则适合动态渲染和复杂的动画效果。理解和掌握这两种技术将大大提升你在网页开发中的图形处理能力。在接下来的文章中，我们将继续深入探讨更多的HTML5和CSS3高级功能，帮助你进一步提升你的前端开发技能。欢迎继续关注我们的系列教程，持续提升你的编程能力！