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

1 Canvas 简介

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

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

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

2 使用 Canvas 绘制图形

2.1 <canvas> 标签

使用 HTML5 中的 <canvas> 标签在网页中创建一个画布，语法格式如下：

<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签，请更新浏览器
</canvas>

上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。

通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象，代码如下所示：

var canvas = document.getElementById("canvas");

上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。

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

var context = canvas.getContext('2d');

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

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

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

2.2 绘制线条

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

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

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

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

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

context.moveTo(x, y);

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

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

context.lineTo(x, y);

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

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

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

context.stroke();

2.3 设置线条的样式

context.lineWidth=5;//设置线的宽度

context.strokeStyle="red";//设置线的颜色

context.lineCap="round";//设置圆形端点

context.fillStyle="pink";//设置背景颜色

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

2.4 设置线条的路径

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

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

路径的状态：

重置路径
闭合路径

重置路径的概念：

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

步骤二：重置路径

<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.moveTo(10,10);           // 定义初始位置
context.lineTo(300,10);           // 定义链接端点
context.lineWidth=5;           // 设置线的宽度
context.strokeStyle='red';       // 设置线的颜色
context.stroke();               // 描边
context.beginPath();           // 重置路径
context.moveTo(10,60);           // 定义初始位置
context.lineTo(300,60);           // 定义链接端点
context.lineWidth=10;           // 设置线的宽度
context.strokeStyle='green';   // 设置线的颜色
context.stroke();               // 描边
</script>

闭合路径的概念：

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <canvas id="canvas" width="400" height="300">
           您的浏览器不支持canvas标签，请更新浏览器
       </canvas>
       <script>
           var canvas = document.getElementById('canvas');
           var context = canvas.getContext('2d');

           context.moveTo(10,10);
           context.lineTo(10,100);
           context.lineTo(100,100);
           context.closePath();   // 闭合路径
           context.stroke();
       </script>
   </body>
</html>

3 Canvas 常用方法

3.1 canvas 绘制矩形

绘制一个红色的矩形

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

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

3.2 canvas 绘制圆形

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

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

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

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

context.arc(100, 100, 50, 0, 360 * Math.PI / 180); // 绘制圆形
context.stroke(); // 描边

3.3 canvas 绘制椭圆

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

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

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

绘制一个椭圆

context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180); // 绘制椭圆
context.stroke(); // 描边

3.4 canvas 绘制文本

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

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

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

context.font = '30px Arial'; // 设置文本样式
context.fillText('Hello World', 10, 50); // 绘制实心文字

3.5 canvas 渐变

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

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

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

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

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

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

gradient.addColorStop(0, 'red');       // 设置渐变颜色（开始）
   gradient.addColorStop(1, 'green');   // 设置渐变颜色（结束）
   context.fillStyle = gradient;               // 设置渐变填充样式
   context.fillRect(10, 10, 200, 80);   // 绘制矩形

4 SVG 简介

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

HTML5 支持内联 SVG。

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

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

4.1 什么是SVG ?

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

4.2 SVG优势

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

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

4.3 SVG 与 Canvas 两者间的区别

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

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

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

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

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

5 使用 SVG 绘制基本图形

5.1 绘制矩形

使用 rect 标签，主要属性：

x/y：绘图位置，
width/height：矩形长宽，
fill：填充颜色，默认黑色，
stroke：描边的颜色。
stroke-width：描边的宽度。
rx/ry：描边的圆角。

5.2 绘制圆和椭圆

5.2.1 绘制圆

方法一：使用矩形绘制。

示例代码：

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

方法二：

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

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

5.2.2 绘制椭圆

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

5.3.1 绘制直线

5.3.2 绘制折线

5.3.3 绘制多边形