HTML5有两个主要的2D图形技术：Canvas和SVG。
- Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。
- Canvas是基于“位图”的，适合于像素处理和动态渲染，放大图形会使图形失真
- SVG是基于“矢量”的，不适合于像素处理和适合静态描述，放大图形不会使图形失真
- 使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”
- 如果发生修改，使用Canvas需要重绘，而使用SVG不需要重绘
- 在实际开发中，需要根据需求选择其中一种
Canvas元素
使用Canvas元素来绘制图形，需要以下3步：
- 获取Canvas对象
- 获取上下文环境对象context
- 开始绘制图形
代码示例：
说说
- 在Canvas中，我们使用document.getElementById()方法来获取Canvas对象-是一个DOM对象
- 使用Canvas对象的getContext("2d")方法获取上下文环境对象context
- 使用context对象的属性和方法来绘制各种图形
Canvas元素介绍
Canvas元素是一个行内块元素，是inline-block
其属性3个：id，width和height
width和height分别用于定义Canvas元素的宽度和高度
默认情况下,Canvas元素的宽度为300px，高度为150px
修改Canvas的宽度和高度
在HTML属性中定义，或是在CSS样式中定义，建议不在CSS样式中定义，而在HTML属性
如下点击Canvas图形：获取宽度和高度
定义一个宽度为200px，高度为150px的Canvas图形
如果在CSS样式中定义，Canvas元素的宽度和高度是默认值，而不是所定义的宽度和高度，这样我们就无法获取Canvas元素正确的宽度和高度。所以要获得宽度和高度，一定要在HTML属性中定义。
Canvas对象
在Canvas中，我们使用document.getElementById()来获取Canvas对象
Canvas对象的常用属性
| 属性 |
说明 |
| width |
Canvas对象的宽度 |
| height |
Canvas对象的高度 |
Canvas对象的常用方法
| 属性 |
说明 |
| getContext("2d") |
获取Canvas2D上下文环境对象 |
| toDataURL() |
获取Canvas对象产生的位图的字符串 |
- 使用cnv.width和cnv.height分别获取Canvas对象的宽度和高度
- 使用cnv.getContext("2d")来获取Canvas 2D上下文环境对象
- 使用toDataURL()来获取Canvas对象产生的位图的字符串
- cnv指的是☞Canvas对象
在Canvas中，使用getContext("2d")来获取Canvas 2D上下文环境对象，这个对象称为context对象。
直线图形
常见的直线图形有以下3种：
- 直线
- 矩形
- 多边形
Canvas坐标系
学习Canvas最基本的前提是学习使用Canvas使用的坐标系
我们学习常见的坐标系叫数学坐标系，而Canvas使用的坐标系是W3C坐标系
- 数学坐标系：y轴正方向向上
- W3C坐标系：y轴正方向向下
记住：W3C坐标系的y轴正方向是向下的。
直线绘制
在Canvas中，使用moveTo()和lineTo()两个方法可以来画直线，利用这两个方法，我们可以画一条直线，也可以画多条直线。
一条直线
- cxt表示上下文环境对象context
- (x1,y1)表示直线“起点”的坐标
- moveTo(x1,y1)的含义是“将画笔移到点(x1,y1)位置，然后开始绘图
- (x2,y2)表示直线“终点”的坐标
- lineTo(x2,y2)的含义是“使用画笔从起点(x1,y1)开始画直线，一直画到终点(x2,y2)
- moveTo()和lineTo()，仅仅确定直线的“起点坐标”和“终点坐标”，但实际上画笔还没画
- 调用上下文环境对象的stroke()方法才有效
点击图形☞
多条直线
使用moveTo()和lineTo()这两个方法可以画一条直线，其实，也可以画多条直线。
语法：
说明：
lineTo()方法是可以重复使用的
- 第一次使用lineTo()后，画笔会自动移到终点
- 第二次使用lineTo()后，Canvas会以“上一个终点的坐标”作为第二次调用的起点，开始画直线
示例：
点击图形☞
- moveTo()：将画笔移到该点的位置，然后开始绘图
- lineTo()：将画笔从起点开始画直线，一直到终点
用直线画一个三角形
提示：画三角形前，要先确定三角行3个顶点的坐标
点击图形☞
用直线画一个矩形
点击图形☞
画一个矩形，使用moveTo()和lineTo()方法有点麻烦，可以使用Canvas提供的独立方法。
在Canvas中，矩形分两种：
- 描边矩形
- 填充矩形
描边矩形:使用这两种方法：strokeStyle属性和strokeRect()方法，来画一个描边矩形。
- strokeStyle属性
- strokeRect()方法
语法：
- strokeStyle是context对象的一个属性
- strokeRect()是context对象的一个方法
strokeStyle属性
strokeStyle属性取值有3种：颜色值，渐变色和图案。
示例：
strokeRect()方法
strokeRect()方法：(x,y)表示矩形左上角的坐标，width表示矩形的宽度，height表示矩形的高度，默认情况下 width 和 height 都是以px为单位的。
记住：strokeStyle属性必须在使用strokeRect()方法之前定义，否则strokeStyle属性无效。
点击图形☞
记住cxt.strokeStyle="red";和cxt.strokeRect(50,50,100,100);这两句代码位置不能互换，否则就不会生效了。
填充矩形
- 使用fillStyle属性和fillRect()方法来画一个填充矩形
说明：
-
fillStyle是context对象的一个属性
-
fillRect()是context对象的一个方法
-
fillStyle属性，取值有3种：颜色值，渐变色，图案
-
fillRect()方法：(x,y)是矩形左上角的坐标，width表示矩形的宽度，height表示矩形的高度
记住：填充矩形的fillStyle属性必须在fillRect()方法之前定义
点击图形☞
示例描边矩形和填充矩形
点击图形☞
fillStyle属性取不同的颜色值
点击图形☞
rect()方法
在Canvas种，绘制一个矩形，使用strokeRect()和fillRect()这两个方法外，还可以使用rect()方法。
rect(x,y,width,height);
- x和y为矩形左上角的坐标
- width表示矩形的宽度
- height表示矩形的高度
strokeRect()，fillRect()，rect()这3个方法可以画矩形。
strokeRect()和fillRect()两个方法在被调用之后，会立刻把矩形绘制出来，而使用rect()方法在被调用之后，不会立刻绘制出来，只有使用stroke()和fil()方法，才会把矩形绘制出来
rect()方法
点击图形☞
清空矩形
在Canvas中，可以使用clearRect()方法来清空“指定矩形区域”
语法：
说明：
- x,y分别表示被清空矩形区域左上角点的横纵坐标
- width表示矩形的宽度,height表示矩形的高度
使用clearRect()方法来清空指定矩形区域
点击图形☞
所有Canvas图形操作的属性和方法都是基于context对象的
多边形
多边形是使用moveTo()和lineTo()这两个方法画出来的，矩形有专门用来绘制的方法，而没有专门用来绘制三角形和多边形的方法。
箭头
点击图形☞
正三角形
根据正三角形的特点：封装一个绘制正多边形的函数createPolygon()
点击图形☞
五角星
点击图形☞
绘制调色板
方格调色
点击图形☞
需求两层for循环来绘制方格阵列，每个方格使用不同的颜色，其中变量i和j，用来为每一个方格产生唯一的RGB色彩值。
渐变调色板
点击图形☞
曲线图形
在Canvas中，基本图形包含两种：
- 直线图形
- 曲线图形
曲线图形，一般分两种情况：
- 曲线
- 弧线：是圆的一部分
图形
在Canvas中，可以使用arc()方法来画一个圆
- 先调用beginPath()方法来声明“开始一个新路径”
- 使用arc()方法画圆
- closePath()方法来关闭当前路径
- beginPath()表示“开始路径”,closePath()表示“关闭路径”
- beginPath()和closePath()一般都是配合使用的
- x表示圆心横坐标，y表示圆心纵坐标。(x,y)表示圆心坐标
- 开始角度，结束角度：开始角度和结束角度都是以弧度为单位。如180°写成Math.PI
- 推荐写法120*Math.PI/180
- anticlockwise：anticlockwise是一个布尔值，当值为true，表示按逆时针方向绘制，当值为false，表示按顺时针方向绘制。
描边圆
在Canvas中，我们可以使用stroke()方法来绘制一个“描边的圆”
- strokeStyle属性用于定义边框颜色
- stroke()方法用于执行描边动作
点击图形☞
开始路径，arc()画圆，结束路径，描边操作
点击图形☞
填充圆
在Canvas中，使用fill()方法来绘制一个“填充的圆”
- fillStyle属性用于定义填充的颜色
- fill()方法用于定义填充动作
整圆在后，会覆盖半圆的
弧线
arc()方法画弧线
在Canvas中，arc()方法不仅可以用于画圆形，还可以用于绘制弧线
- (x,y)表示圆心坐标
- anticlockwise取值表示“是否逆时针"
- 默认情况下,anticlockwise取值为false
- 当anticlockwise取值为true时，表示按逆时针方向绘制
- 当anticlockwise取值为true时，表示按逆时针方向绘制
- 当anticlockwise取值为false时，表示按顺时针方向绘制
arc()方法画弧线时，不使用closePath()方法来关闭路径，因为弧线不是一个闭合圆形，而closePath()方法用于绘制闭合图形的.
使用arc()方法画弧线
点击图形☞