提示：<svg>与<canvas>
目录
目录
一、svg标签
1.简介
2.常用属性
3.标签
4.使用示例
二、canvas标签
1.简介
2.常用属性与方法
3.使用示例
1)绘制基础图案
2)绘制组合图案(一个爱心)
3)做一幅动图
三、svg与canvas的区别
一、svg标签
1.简介
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维图形和动画的 XML 标记语言。它支持基本形状、路径、文本、图像、渐变、滤镜等元素，可以创建丰富多彩、高度可定制的图形和动画效果，特点是可以无限缩放而不失真。
2.常用属性
width 和 height：用于指定SVG图形的宽度和高度。您可以使用像素(px)、百分比(%)等单位。
<svg width="200" height="100">viewBox：用于指定SVG图形的视口框。视口框定义了用户坐标系的范围，并且可以通过它来实现图形的缩放和移动。
<svg viewBox="0 0 200 100">xmlns：用于指定XML命名空间。对于SVG，通常是指定为"http://www.w3.org/2000/svg"。
<svg xmlns="http://www.w3.org/2000/svg">fill：用于指定SVG图形的填充颜色。
<svg fill="red">stroke 和 stroke-width：分别用于指定SVG图形的边框颜色和宽度。
<svg stroke="black" stroke-width="2">class 和 id：用于为SVG图形指定类名和唯一标识符ID，以便通过CSS或JavaScript进行样式和操作控制。
<svg class="my-svg" id="svg1">preserveAspectRatio：用于指定如何适应SVG图形的视口框和容器大小之间的比例关系。
<svg preserveAspectRatio="xMinYMin meet">3.<path>标签
<path> 标签用于在 SVG 中定义一个路径。路径可以是直线、曲线、圆弧、贝塞尔曲线等，通过指定路径数据来描述形状。
<path> 标签的主要属性是 d，它用于定义路径的数据。路径数据是一系列的命令和参数，指示了如何绘制路径的形状和轮廓。路径数据中的命令包括移动到（M）、直线到（L）、水平线到（H）、垂直线到（V）、曲线到（C、S、Q、T）、弧线到（A）等。
示例：
<!--使用<path>做一个三角形--><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 10 L 90 10 L 50 90 Z" fill="none" stroke="black" /></svg>4.使用示例
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基本模板</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body> <!-- 矢量图: 一种缩放不容易失真的图片 --> <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" fill="green" class="bi bi-1-circle" viewBox="0 0 16 16"> <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z" /> </svg> <!-- xmlns="http://www.w3.org/2000/svg"：指定 SVG 命名空间。 width="100px" height="100px"：指定 SVG 图形的宽度和高度为 100 像素。 fill="green"：指定图形的填充颜色为绿色。 class="bi bi-1-circle"：指定图形的 CSS 类名，用于样式控制。 viewBox="0 0 16 16"：指定 SVG 图形的视口框，用于定义用户坐标系的范围。 <path> 元素： d 属性：定义了 SVG 路径数据，描述了要绘制的路径的形状和轮廓。路径数据使用 SVG 路径命令来描述，如 M、A、L 等。在这个例子中，路径数据描述了一个圆形的轮廓和一个中空的圆环。 M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z：描述了一个圆形轮廓，圆心在坐标 (1, 8)，半径为 7。 m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0Z：描述了一个中空的圆环，圆心在坐标 (15, 0)，半径为 8。 M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z：描述了圆环内部的一些装饰效果。 --></body></html>二、canvas标签
1.简介
canvas 是画布标签，需要结合JS才能使用。应用场景： 1. 展示广告2. 数据统计（柱状图、折线图、饼状图） 3. JS小游戏。
2.常用属性与方法
属性：
width：画布的宽度。height：画布的高度。 获取上下文对象的方法：
getContext('2d')：获取绘图上下文对象，用于绘制2D图形。 绘制图形：
fillRect(x, y, width, height)：绘制填充的矩形。strokeRect(x, y, width, height)：绘制边框的矩形。clearRect(x, y, width, height)：清除指定矩形区域的内容。fillText(text, x, y [, maxWidth])：绘制填充的文本。strokeText(text, x, y [, maxWidth])：绘制边框的文本。drawImage(image, x, y [, width, height])：绘制图像。 路径绘制：
beginPath()：开始绘制路径。moveTo(x, y)：将笔触移动到指定位置。lineTo(x, y)：绘制一条直线到指定位置。arc(x, y, radius, startAngle, endAngle [, anticlockwise])：绘制圆弧。(x:圆心的 x 坐标,y:圆心的 y 坐标,radius:圆的半斤，startAngle:起始角度，以弧度为单位 ,endAngle:结束角度，以弧度为单位,anticlockwise（可选）：布尔值,表示绘制方向。如果为 true，则逆时针绘制；如果为 false（默认值），则顺时针绘制)closePath()：闭合路径。stroke()：绘制路径的边框。fill()：填充路径。 样式设置：
fillStyle：设置图形的填充颜色或样式。strokeStyle：设置图形的边框颜色或样式。lineWidth：设置线条的宽度。font：设置文本的字体样式。 其他方法：
save()：保存当前绘图状态。restore()：恢复之前保存的绘图状态。clearRect(x, y, width, height)：清除指定矩形区域的内容。translate(x, y)：移动绘图原点。rotate(angle)：旋转坐标系。scale(x, y)：缩放绘图。 3.使用示例
1)绘制基础图案
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基本模板</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <style> canvas { background-color: #ccc; } </style></head><body> <!-- 特别提醒: canvas不是容器标签，是画布标签，用于绘制图形图像。 需要结合JS才能使用。 默认尺寸: 300 * 150 不是通过css给图片上颜色, 也不是通过css给图片设置尺寸！！ 如果浏览器提示canvas标签包裹着的文本，就说明该浏览器不支持canvas标签，那就需要换一个浏览器试试！ --> <canvas id="canvas">当前浏览器不支持canvas标签（画布标签）,请换一个浏览器再尝试！</canvas> <script> // canvas 是画布标签，需要结合JS才能使用。 // 应用场景： // 1. 展示广告 // 2. 数据统计（柱状图、折线图、饼状图） // 3. JS小游戏 // 有哪些api? // 绘制线 // 绘制矩形 // 绘制圆形 // 绘制图片 // 绘制文本 // ... // 怎么使用? // 获取canvas对象 var canvas = document.getElementById("canvas"); // 设置画布尺寸 canvas.width = 600; canvas.height = 800; // 获取绘制图形图像的对象 （画笔） var pen = canvas.getContext("2d"); console.log(pen); // 坐标（0,0）在画布的左上角 // // 1) 绘制线 // // 开始绘制 // pen.beginPath(); // // 设置描边颜色 // pen.strokeStyle = "red"; // // 设置线的宽度 // pen.lineWidth = 5 // // 设置线的样式 // // pen.lineCap = "" // // 设置起点 // // pen.moveTo(x,y) // pen.moveTo(100,200); // // 设置下一个点（终点） // pen.lineTo(500,200); // // 结束绘制 // pen.closePath(); // // 描边 // pen.stroke(); // // 2) 绘制三角形 // // 开始绘制 // pen.beginPath(); // // 设置描边颜色 // pen.strokeStyle = "red"; // // 填充颜色 // pen.fillStyle="yellow" // // 设置线的宽度 // pen.lineWidth = 5 // // 设置线的样式 // // pen.lineCap = "" // // 设置起点 // // pen.moveTo(x,y) // pen.moveTo(100,200); // // 设置下一个点 // pen.lineTo(500,200); // // 设置下一个点（终点） // pen.lineTo(300,400); // // 结束绘制 // pen.closePath(); // // 描边 // pen.stroke(); // // 填充 // pen.fill(); // // 4) 绘制矩形 （第一种写法） // // 开始绘制 // pen.beginPath(); // // 设置描边颜色 // pen.strokeStyle = "red"; // // 填充颜色 // pen.fillStyle = "yellow" // // 设置线的宽度 // pen.lineWidth = 5 // // 设置线的样式 // // pen.lineCap = "" // // 设置起点 // // pen.moveTo(x,y) // pen.moveTo(100, 200); // // 设置下一个点 // pen.lineTo(500, 200); // // 设置下一个点 // pen.lineTo(500, 400); // // 设置下一个点（终点） // pen.lineTo(100, 400); // // 结束绘制 // pen.closePath(); // // 描边 // pen.stroke(); // // 填充 // pen.fill(); // // 4) 绘制矩形 （第二种写法） // // 开始绘制 // pen.beginPath(); // // 设置描边颜色 // pen.strokeStyle = "red"; // // 填充颜色 // pen.fillStyle = "yellow" // // 设置线的宽度 // pen.lineWidth = 5 // // 设置线的样式 // // pen.lineCap = "" // // 设置距离的坐标和尺寸 // // pen.rect(x, y, w,h); // pen.rect(100, 200, 400,200); // // 结束绘制 // pen.closePath(); // // 描边 // pen.stroke(); // // 填充 // pen.fill(); // // 4) 绘制矩形 （第三种写法） // // 开始绘制 // pen.beginPath(); // // 设置描边颜色 // pen.strokeStyle = "red"; // // 填充颜色 // pen.fillStyle = "yellow" // // 设置线的宽度 // pen.lineWidth = 5 // // 设置线的样式 // // pen.lineCap = "" // // 设置距离的坐标和尺寸 // // pen.rect(x, y, w,h); // pen.fillRect(100, 200, 400, 200); // pen.strokeRect(100, 200, 400, 200); // // 结束绘制 // pen.closePath(); // 5） 绘制弧形、圆形 // 一个圆形 360 ° // 涉及弧度的计算(公式) // 弧度 = 角度 * Math.PI / 180 pen.beginPath(); // 设置描边颜色 pen.strokeStyle = "red"; // 填充颜色 pen.fillStyle = "yellow"; // 定义对象记录坐标，半径 var point = { x: 100, y: 200, r: 100,// 半径 } // 设置圆心坐标 pen.moveTo(point.x, point.y); // 绘制一个圆形 pen.arc( point.x, // x坐标 point.y, // y坐标 point.r, // 半径 180 * Math.PI / 180, // 开始弧度 360 * Math.PI / 180,// 结束弧度 true // false 顺时针，否则反之 ) // 结束绘制 pen.closePath(); // 描边 pen.stroke(); // 填充 pen.fill(); // 6) 绘制文本 pen.beginPath(); // 填充颜色 pen.fillStyle = "red"; // 设置字体 pen.font = "20px 微软雅黑"; // 设置文本水平位置 pen.textAlign="center"; // 设置垂直文本位置 pen.textBaseline = "bottom"; // 填充文本 pen.fillText("休息一哈！",point.x,point.y); pen.closePath(); </script></body></html>2)绘制组合图案(一个爱心)
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基本模板</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body> <canvas id="canvas" class="bg-success"></canvas> <script> // 获取canvas对象 var canvas = document.getElementById("canvas"); // 设置画布尺寸 canvas.width = 600; canvas.height = 800; // 获取绘制图形图像的对象 （画笔） var pen = canvas.getContext("2d"); // console.log(pen); // 绘制矩形 var drawRect = function (x, y, w, h, color) { pen.beginPath(); pen.fillStyle = color || "red"; pen.fillRect(x, y, w, h); pen.closePath(); } // 绘制圆形 var drawCircle = function (x, y, r, s, e, color) { pen.beginPath(); pen.fillStyle = color || "red"; // pen.strokeStyle= color || "red"; pen.arc( x, y, r, s * Math.PI / 180, e * Math.PI / 180, true ) pen.closePath(); pen.fill(); // pen.stroke(); } // 定义对象记录坐标尺寸 var point = { x: 100, y: 200, w: 100, h: 100, r: 50 } // 先绘制矩形 drawRect( point.x, point.y, point.w, point.h ) // 在绘制圆形状 drawCircle( point.x + 50, point.y, point.r, 0, 360 ) drawCircle( point.x, point.y + 50, point.r, 0, 360 ) // 判断绘制的角度是为顺时针 // pen.beginPath(); // pen.strokeStyle= "red"; // pen.arc( // 400, // 400, // 100, // 0 * Math.PI / 180, // 90 * Math.PI / 180, // false // false 顺时针 , true 是逆时针 // ) // pen.stroke(); </script></body></html>3)做一幅动图
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基本模板</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body> <canvas id="canvas"></canvas> <!-- <img src="./assets/2.jpg" alt=""> --> <script> // 获取画布标签 var canvas = document.querySelector("#canvas"); // 创建图片 var img = new Image(); // 请求图片资源 img.src = "./assets/2.jpg"; // 设置画布尺寸 canvas.width = 800; canvas.height = 600; // 获取canvas上下对象（画笔） var ctx = canvas.getContext("2d"); // console.log(ctx); // 记录每一帧动画的坐标和尺寸 var arr = [ { sx: 30, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 210, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 380, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 568, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 10, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 216, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 410, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 }, { sx: 590, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 } ] // 记录数组的索引 var index = 7; // 绘制图像 img.onload = function () { // 绘制图片 // ctx.drawImage( // img,// 图片资源 // 0,// 在画布的x坐标 // 0,// 在画布的y坐标 // img.width * (1/2),// 在画布的尺寸 // img.height* (1/2)// 在画布的尺寸 // ) // 绘制图片部分的效果（裁剪图片绘制在画布上） // ctx.drawImage( // img,// 图片资源 // 0, // 在图片的x坐标 // 0, // 在图片的y坐标 // 192, // 裁剪图片的宽度 // 260,// 裁剪图片的高度 // 0,// 在画布的x坐标 // 0,// 在画布的y坐标 // 192,// 在画布的尺寸 // 260// 在画布的尺寸 // ) // 把裁剪的坐标尺寸和画布的坐标尺寸做成变量 ctx.drawImage( img,// 图片资源 arr[index].sx, // 在图片的x坐标 arr[index].sy, // 在图片的y坐标 arr[index].sw, // 裁剪图片的宽度 arr[index].sh, // 裁剪图片的高度 arr[index].x, // 在画布的x坐标 arr[index].y, // 在画布的y坐标 arr[index].w, // 在画布的尺寸 arr[index].h // 在画布的尺寸 ) } // 使用定时器 var timer = setInterval(function(){ index ++; index = index > arr.length-1 ? 0: index; // 先清除画布 ctx.clearRect( 0, 0, canvas.width, canvas.height ) // 再绘制图片 ctx.drawImage( img,// 图片资源 arr[index].sx, // 在图片的x坐标 arr[index].sy, // 在图片的y坐标 arr[index].sw, // 裁剪图片的宽度 arr[index].sh, // 裁剪图片的高度 arr[index].x, // 在画布的x坐标 arr[index].y, // 在画布的y坐标 arr[index].w, // 在画布的尺寸 arr[index].h // 在画布的尺寸 ) }, 1000 / 12);// 一秒钟执行12次 </script></body></html>三、svg与canvas的区别
1、canvas时h5提供的新的绘图方法
svg已经有了十多年的历史
2、vanvas画图基于像素点，是位图，如果进行放大或缩小会失真
svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制
svg在html正绘制
4、canvas支持颜色较svg多
5、canvas无法对已经绘制的图像进行修改、操作
svg可以获取到标签进行操作