cnavas简介 绘制图形 常用方法 SVG简介 使用SVG绘制基本图形

1.1 目标

• Canvas 简介
• 使用 Canvas 绘制图形
• Canvas 常用方法
• SVG 简介
• 使用 SVG 绘制基本图形

1.2 重点

• 使用 Canvas 绘制图形
• Canvas 常用方法
• 使用 SVG 绘制基本图形

1.3 难点

• 使用 Canvas 绘制图形
• Canvas 常用方法
• 使用 SVG 绘制基本图形

2 Canvas 简介

Canvas 表示画布，现实生活中的画布是用来作画的。

HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。

利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。

3 使用 Canvas 绘制图形

3.1 <canvas> 标签

使用 HTML5 中的 <canvas> 标签在网页中创建一个画布，通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象

context 对象：是画布的上下文，也叫做绘制环境，是所有的绘制操作 API 的入口。
context 对象可以使用 getContext() 方法获得

​ var context = canvas.getContext(‘2d’);

上述代码中的参数 2d 代表画笔的种类，表示二维绘图的画笔。如果想要绘制三维图，可以把参数替换为 webgl。

2d：代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制。

Canvas 的坐标系：从最左上角 0,0 开始。x 轴向右逐渐增加，y 轴向下逐渐增加。

3.2 绘制线条

线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。

线的组成：在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zvaSFQAQ-1671452542545)(D:\日常作业\文档\07 MD文档\MD文档.assets\canvas-2.png)]

初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。

在画布中使用 moveTo(x, y) 方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用 , 隔开。x 和 y 的取值为数字，表示像素值（单位省略）。

设置初始位置的示例代码如下所示：

​ context.moveTo(x, y);

连线端点：在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。

定义连线端点的代码如下所示：

​ context.lineTo(x, y);

描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。

使用画布中的 stroke() 方法，可以实现线的可视效果。

设置描边的代码如下所示：

​ context.stroke();

3.3 设置线条的样式

掌握设置线条的样式的方法，能够实现设置不同样式的线条。

设置线条宽度：使用 lineWidth 属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

设置线的宽度的示例代码如下所示：

​ context.lineWidth = 10;

以上代码设置了线的宽度为 10px。

设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。

设置描边颜色的示例代码如下所示：

					context.strokeStyle = '#f00';
					   context.strokeStyle = 'red';

设置端点形状：默认情况下，线的端点是方形的，通过 lineCap 属性可以改变端点的形状。

lineCap 属性的取值有3个：

• butt（默认值）：默认效果，无端点，显示直线方形边缘

• round：显示圆形端点

• square：显示方形端点

设置端点形状的示例代码如下所示：

​ context.lineCap = ‘round’; // 设置圆形端点

除了执行 stroke() 方法根据路径进行描边，还可以使用 fill() 方法进行图形的填充，示例代码如下：

​ context.fill();

同理也可以使用 fillStyle 属性可以定义路径的填充颜色，该属性的取值为十六进制颜色值或颜色的英文名，示例代码如下：

​ context.fillStyle = ‘green’;

以上代码将会给路径填充绿色。

注意：无论是描边还是填充，设置的样式都需要写在描边或填充方法之前才起作用。

3.3 设置线条的路径

掌握设置线条的路径的方法，能够在网页中绘制多种图形。

路径的定义：路径是所有图形绘制的基础，通过初始位置和连线端点即可创建一条路径。

路径需要通过路径状态进行重置或闭合，来产生不同的路径样式。

路径的状态：

• 重置路径

• 闭合路径

重置路径的概念：

在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。

闭合路径的概念：

闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。

canvas 绘制图形的基本步骤：

① 创建画布：<canvas></canvas>

② 准备画笔（获取上下文对象）：canvas.getContext(‘2d’);

③ 开始路径规划 ：context.beginPath();

④ 移动起始点 ：context.moveTo(x, y);

⑤ 绘制线（矩形、圆形、图片…）：context.lineTo(x, y);

⑥ 闭合路径：context.closePath();

⑦ 绘制描边 ：context.stroke();

4 Canvas 常用方法

canvas 中常用的方法如下：

绘制图形	方法	描述
矩形	rect()	创建矩形。
	fillRect()	绘制带填充的矩形。
	strokeRect()	绘制无填充的矩形。
	clearRect()	在给定的矩形内清除指定的像素。
圆形	arc()	创建圆形。
椭圆形	ellipse()	创建椭圆形。
文本	strokeText()	绘制空心文本。
	fillText()	绘制实心文本。
图像	drawImage()	绘制图像。

4.1 canvas 绘制矩形

设置 fillStyle 属性可以是 CSS 颜色、渐变或图案。fillStyle 默认设置是 #000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

4.2 canvas 绘制圆形

在canvas中绘制圆形，我们将使用以下方法:

arc(x, y, r, start, stop)

参数分别是：（圆心x坐标, 圆心y坐标, 半径r, 开始弧度, 结束弧度）。

结束弧度的计算公式：角度 * Math.PI / 180。

4.3 canvas 绘制椭圆

在 canvas 中绘制椭圆, 我们将使用以下方法:

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

参数分别是：（椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针）

4.4 canvas 绘制文本

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用“Arial”字体在画布上绘制一个高 30px 的实心文字：

4.5 canvas 渐变

渐变可以填充到矩形、圆形、线条、文本等，各种形状可以自定义不同的颜色。

有两种方式来设置 Canvas 渐变：

• createLinearGradient(x, y, x1, y1)：创建线条渐变；
• createRadialGradient(x, y, r, x1, y1, r1)：创建一个径向/圆渐变。

使用 createLinearGradient()，创建一个线性渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop() 方法指定停止颜色，位置可以是 0 至 1。

使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形、文本或一条线。

使用渐变填充矩形:

5 SVG 简介

SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。

HTML5 支持内联 SVG。

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

5.1 什么是SVG ?

• SVG 指可伸缩矢量图形（Scalable Vector Graphics）；
• SVG 用于定义用于网络的基于矢量的图形；
• SVG 使用 XML 格式定义图形；
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；
• SVG 是万维网联盟的标准。

5.2 SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改；
• SVG 图像可被搜索、索引、脚本化或压缩；
• SVG 是可伸缩的；
• SVG 图像可在任何的分辨率下被高质量地打印；
• SVG 可在图像质量不下降的情况下被放大。

5.3 浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

5.4 SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较：

Canvas	SVG
依赖分辨率； 不支持事件处理器； 弱的文本渲染能力； 能够以 .png 或 .jpg 格式保存结果图像； 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。	不依赖分辨率； 支持事件处理器； 最适合带有大型渲染区域的应用程序（比如谷歌地图）； 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）； 不适合游戏应用。

6 使用 SVG 绘制基本图形

6.1 绘制矩形

使用 rect 标签，主要属性：

• x/y：绘图位置，

• width/height：矩形长宽，

• fill：填充颜色，默认黑色，

• stroke：描边的颜色。

• stroke-width：描边的宽度。

• rx/ry：描边的圆角。

6.2 绘制圆和椭圆

6.2.1 绘制圆

方法一：使用矩形绘制。

示例代码：

<svg width="500" height="500">
	  	  <rect x="100" y="10" width="100" height="100" rx="50"></rect>
</svg>

方法二：使用专门的标签绘制，主要属性：

• cx/cy：圆绘制的位置，圆心位置。
• r：圆的半径。

如下绘制的圆：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8hsnIiG-1671452542546)(D:\日常作业\文档\07 MD文档\MD文档.assets\circle-1.png)]

示例代码：

<svg width="500" height="500">
     <circle cx="150" cy="200" r="50"></circle>
</svg>

6.2.2 绘制椭圆

方法一：使用矩形绘制。

示例代码：

<svg width="500" height="500">
   <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

方法二：使用专门的标签绘制，主要属性：

• cx/cy：椭圆绘制的位置，圆心的位置。
• rx/ry：椭圆的半径。

如下绘制的椭圆：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmTymNnj-1671452542546)(D:\日常作业\文档\07 MD文档\MD文档.assets\ellipse-2.png)]

<svg width="500" height="500">
   <ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>

6.3 绘制直线、折线、多边形

6.3.1 绘制直线

• x1/y1：起点
• x2/y2：终点
• stroke：线条颜色，必须有

如下直线效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3TY4hPz-1671452542546)(D:\日常作业\文档\07 MD文档\MD文档.assets\line-1.png)]

示例代码：

<svg width="500" height="500">
    <line x1="100" y1="100" x2="200" y2="100" stroke="red"></line>
</svg>

6.3.2 绘制折线

• points：设置所有折线的点。
• fill：是否填充，默认填充。

如下折线效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TGIlqrF7-1671452542547)(D:\日常作业\文档\07 MD文档\MD文档.assets\polyline-1.png)]

示例代码：

<svg width="500" height="500">
	<polyline points="100 150 300 150 300 200" stroke="red" fill="none"></polyline>
</svg>

6.3.3 绘制多边形

方法一：折线从起点回到终点，就是多边形。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7CHb7iIP-1671452542547)(D:\日常作业\文档\07 MD文档\MD文档.assets\polyline-2.png)]

示例代码：

<svg width="500" height="500">
	<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>

方法二：关闭路径。

polygon 和 polyline 差不多，只是会自动关闭路径。

示例代码：

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>

line>

#### 6.3.3 绘制多边形

方法一：折线从起点回到终点，就是多边形。

[外链图片转存中...(img-7CHb7iIP-1671452542547)]

示例代码：

```xml
<svg width="500" height="500">
	<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>

方法二：关闭路径。

polygon 和 polyline 差不多，只是会自动关闭路径。

示例代码：

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>