一、canvas

canvas是HTML5新增的标签，用于提供“画布”

可以通过canvas元素获取对应的“上下文”（可以理解为画笔）来操作显示内容

canvas的标准属性有 width和 height （例如 id， class 这些都属于通用标准属性）

width：表示canvas的宽
height：表示canvas的高

canvas 有一个默认宽高在上面更改相当于是拉扯了画布，会影响画笔绘图。 要在标签上直接写宽高

举例：

<canvas id="myCanvas" width="600" height="400"></canvas>
canvas {
    background-color: red;
}

样式：

获取画笔的方式：

①获取对应的canvas元素

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

②通过canvas元素获取画笔

var ctx = canvas.getContext("2d");

查看画笔：

属性：

方法：

小案例：

// 改变画笔默认颜色
// ctx.fillStyle = "white";
// 还可以改变透明度
// ctx.fillStyle = "rgba(255, 255, 123, .5)";


// 画圆
ctx.beginPath();  // beginPath 开辟路径
// 绘制弧  没有直接画圆的方法，而是通过画弧，一圈弧形成一个圆
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);  // arc 弧    
// ctx.arc(100, 100, 50, Math.PI / 2, Math.PI * 2, false);
// 关闭路径
ctx.closePath(); 
// 调用填充 
ctx.fill();

结果：

1.1 坐标系

canvas已经是最底层元素，没有子元素

所以定位坐标系对于canvas是没有意义的，但是canvas是用来显示图像的，所以自带了一个坐标系

默认与元素的定位坐标系方向一致

举例：

// canvas 是一块区域，可以用来绘制内容，自带了一个坐标系
// x 轴： 正方向向右
// y 轴： 正方向向下
// 原点： 左上角

// 获取元素
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 改变字体样式
ctx.font = "50px 宋体";

// 绘制 x 轴
line(5, 5, 590, 5);
line(585, 0, 590, 5);
line(585, 10, 590, 5);
// 绘制 y 轴
line(5, 5, 5, 390);
line(0, 385, 5, 390);
line(10, 385, 5, 390);

// 填充文字 文字起点位置在左下角
ctx.fillText("x轴", 500, 60);
ctx.fillText("y轴", 10, 350);
ctx.fillText("原点", 10, 60);

// 封装函数，传递两个点，绘制两个点之间的线段
function line(x1, y1, x2, y2){
    // 开启路径
    ctx.beginPath();
    // 移动画笔到某个位置
    ctx.moveTo(x1, y1);
    // 绘制路径
    ctx.lineTo(x2, y2);
    // 关闭路径
    ctx.closePath();
    // 描边
    ctx. stroke();
}

1.2 绘制矩形

// 获取元素
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");

// 绘制矩形 canvas提供一个 API，可以实现一条代码绘制出图形，其他都是在操作路径
// 填充矩形
ctx.fillRect(0, 0, 100, 100);
// 描边矩形
ctx.strokeRect(100, 100, 100, 100);
ctx.fillRect(200, 200, 100, 100);
ctx.strokeRect(300, 300, 100, 100);
ctx.fillRect(400, 200, 100, 100);
ctx.strokeRect(500, 100, 100, 100);
ctx.fillRect(600, 0, 100, 100);

1.3 API

beginPath(); 开启路径

`canvas`上大部分都是在操作路径，所以在绘制图形之前要开启路径
```		

>`closePath();`  关闭路径

关闭路径的时候，会在关闭时候的点和最开始时候的点之间形成一条线段

>`arc(x, y, start, end, dir);`  绘制圆弧

x：圆弧所在的圆心的 x 点
y：圆弧所在的圆心的 y 点
start：圆弧起始的位置
end：圆弧结束的位置
dir：绘制方向不书写时默认为false
false：顺时针绘制
true：逆时针绘制

>`ctx.moveTo(x1, y1); ` 移动画笔到某个位置

>`ctx.lineTo(x2, y2); ` 绘制路径

从 (x1, y1)绘制到(x2, y2)

>`fillText(value, x, y); ` 填充文字 文字起点位置在左下角

如：ctx.fillText(“x轴”, 500, 60);

>`fill();`  用于填充路径

>`stroke();`  描边路径

>`font` 改变文字样式

如：ctx.font = “50px 宋体”;

>`lineWidth`  改变线宽

如：ctx.lineWidth = 3; 默认为 1

>`strokeStyle`  改变描边颜色

如：ctx.strokeStyle = “red”; 默认为 #000000

>`fillStyle`  改变填充颜色

如：ctx.fillStyle = “white”;

ctx.fillStyle = “rgba(255, 255, 123, .5)”; 还可以改变透明度

绘制矩形 `canvas`提供一个 `API`，可以实现一条代码绘制出图形，不用开启、关闭路径

>`fillRext(x, y, w, h);`  绘制填充矩形

```		
x：当前坐标系中的 x 点
y：当前坐标系中的 y 点
w：要填充的矩形的宽
h：要填充的矩形的高

strokeRext(x, y, w, h); 绘制描边矩形

x：当前坐标系中的 x 点
y：当前坐标系中的 y 点
w：要绘制的矩形的宽
h：要绘制的矩形的高

clearRext(x, y, w, h); 清除矩形区域

x：区域的 x 点（左上角）
y：区域的 y 点（左上角）
w：区域的宽
h：区域的高