【svg和canvas的区别】
区别
SVG（Scalable Vector Graphics）和Canvas都是用于在Web上创建图形的技术，它们的主要区别如下：
1. SVG是一种矢量图形格式，它使用XML来描述图形，因此非常适合图形的缩放和变换。而Canvas则是一种位图技术，它使用像素来绘制图形，因此不太适合进行图形的缩放和变换。
2. SVG可以制作复杂的图形，包括高质量的曲线、文本和渐变，Canvas则更适合制作简单的2D图形。
3. SVG基于文档对象模型（DOM），因此可以与其他Web技术（如HTML、CSS）进行无缝集成。而Canvas则需要自己编写JavaScript代码来实现图形的交互和动画效果。
4. SVG浏览器兼容性较好，支持较多种浏览器。而Canvas则需要一些特殊技巧才能实现一些高级功能。
综上所述，SVG适合制作高质量、复杂的图形，而Canvas则适合制作简单的2D游戏、动画和图形效果。
svg使用示例
SVG是一种矢量图形格式，可以用来创建可缩放的图形和动画效果。以下是一些SVG使用示例：
- 创建基本图形：使用SVG可以轻松地创建各种基本图形，如矩形、圆形、椭圆、直线和多边形。
<svg width="100" height="100">
<rect x="10" y="10" width="50" height="50" fill="#f00" />
<circle cx="75" cy="75" r="20" fill="#0f0" />
<line x1="10" y1="70" x2="90" y2="30" stroke="#00f" stroke-width="2" />
<polygon points="20,70 50,90 80,70 70,50 30,50" fill="#ff0" />
</svg>
- 创建文字和路径：使用SVG可以添加文本和路径，以创建更复杂的图形和动画。
<svg width="200" height="100">
<text x="50" y="50" font-size="18" fill="#f00">Hello SVG</text>
<path d="M10,50 C30,30 70,70 90,50" stroke="#0f0" stroke-width="2" fill="none" />
</svg>
- 添加动画：使用SVG可以添加各种动画效果，如平移、缩放、旋转和透明度过渡，以创建炫酷的动画效果。
<svg width="100" height="100">
<rect x="10" y="10" width="50" height="50" fill="#f00">
<animate attributeName="x" from="10" to="50" dur="1s" repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="0" dur="1s" repeatCount="indefinite" />
</rect>
</svg>
以上是一些基本的SVG使用示例，SVG还有许多其他功能和应用，可用于创建交互式图形、数据可视化、动态网站等。
canvas使用示例
以下是一个简单的 Canvas 使用示例，用于在网页上绘制一个矩形并填充颜色：
DOCTYPE html>
<html>
<head>
<title>Canvas 示例title>
<style>
canvas { border: 1px solid black; }
style>
head>
<body>
<canvas id="myCanvas" width="300" height="200">canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取绘图上下文
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 200, 100);
script>
body>
html>
在这个示例中，我们首先定义了一个 Canvas 元素，设置其宽度和高度为 300 和 200 像素，并给它一个边框。然后，在 JavaScript 中，我们通过 getElementById 方法获取 Canvas 元素，通过 getContext 方法获取绘图上下文（这里我们选择了二维绘图上下文 2d）。最后，我们调用 fillRect 方法来绘制一个矩形，并指定填充颜色为红色。运行代码后，我们就可以在网页上看到一个红色的矩形了。