这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
使用canvas
canvas其实是html里面的一个标签，所以要是用canvas,必须先在html文档里面写一个canvas标签。
<!-- canvas在低版本浏览器中有兼容性问题，需要提示用户 -->
<canvas width="500px" height="400px">
您的浏览器版本过低，无法使用canvas
</canvas>
在canvas标签里面，我们可以直接设置canvas元素的大小，这是canvas元素自带的属性，虽然我们也可以在css里面进行更改，但是不推荐，这样会导致一些奇奇怪怪的bug。
但是canvas是HTML5才有的标签，所以就会存在一个兼容性问题，这个时候我们就需要提示用户：在canvas标签里面写上提示信息。
这样如果该浏览器不支持canvas就会显示我们的提示信息，但是如果该浏览器支持canvas就不会显示该提示信息。
使用canvas画一条直线
这里需要使用到JavaScript。
分为下面这几步：
- 获取到canvas元素
- 获取到canvas元素的上下文
- 开启一条路径
- 设置路径的起点
- 设置路径的终点
- 给直线上色
- 关闭路径
下面用代码来实现一下：
// 获取到canvas元素
var canvas = document.querySelector('canvas');
// 获取到canvas操作权限（获取画布的上下文）
var c = canvas.getContext('2d');
// 开启一条路径
c.beginPath();
// 设置路径的起点
c.moveTo(0, 0);
// 设置路径终点
c.lineTo(500, 400);
// 进行上色
c.stroke();
// 关闭路径
c.closePath();
结果如下图：
这里注意，对canvas操作的时候，只能使用原生的JavaScript，不能使用jQuery等js库。
常用的方法和属性
1.画直线
- beginPath() 开启一个路径
- closePath() 关闭一个路径
- moveTo(x,y) 定义线条的开始坐标（x为横坐标，y为纵坐标）
- lineTo(x,y) 定义线条的结束坐标 （x为横坐标，y为纵坐标）
- strokeStyle 属性设置或者返回用于笔触的颜色、渐变或者模式
- stroke 绘制一条路径
- lineWidth 设置线宽
注意：设置颜色和线宽的时候，需要在上色之前进行。
示例：
// 获取到canvas元素
var canvas = document.querySelector('canvas');
// 获取到canvas操作权限（获取画布的上下文）
var c = canvas.getContext('2d');
// 开启一条路径
c.beginPath();
// 设置路径的起点
c.moveTo(100, 100);
// 设置路径终点
c.lineTo(200, 200);
// 设置直线颜色宽度
c.strokeStyle = "red";
c.lineWidth = 10;
// 进行上色
c.stroke();
// 关闭路径
c.closePath();
效果图：
在给直线设置颜色的时候需要加上引号，我们可以按照css设置颜色的当时进行设置：可以写颜色名、十六进制、rgb等等。
同时设置线宽的时候不要加上单位，也不需要加上引号。
2.画圆
画圆需要用到的方法：
| 方法 | 描述 |
|---|---|
| beginPath() | 开启一条路径 |
| arc(x,y,r,startDeg,endDeg,direction) | 画圆的方法，参数解释在下面 |
| strokeStyle | 描边颜色 |
| fillStyle | 填充颜色 |
| stroke() | 结束描边 |
| fill() | 结束填充 |
| closePath() | 关闭路径 |
-
arc(x,y,r,startDeg,endDeg,direction)方法参数：
- x: 圆心所在位置的恒左边
- y:圆心所在位置的纵坐标
- r:所绘制圆的半径
- startDeg:所绘制圆的起始位置（通常用Math.PI来计算）
- endDeg:所绘制圆的结束位置（通常用Math.PI来计算）
- direction:绘制方向，这里只有两个值，false表示顺时针方向绘制；true表示逆时针方向绘制。
-
fill()与stroke()的区别：
- fill():是对整个图形的内部进行填充颜色
- stroke():是对图形的边框进行描边上色
例子时间：
- 使用描边：
var canvas = document.getElementsByTagName('canvas')[0];
var c = canvas.getContext('2d');
c.beginPath();
c.arc(200, 200, 50, 0, Math.PI * 2, false);
c.strokeStyle = "red";
c.stroke();
c.closePath();
为了节约篇幅，此处没有html代码canvas宽高为400*400。css中我设置一个1px的边框以及#ccc的背景颜色
效果就是这样：
这里我们圆心位置在（200,200）位置，然后半径为50px，起始点从0度开始（在这里起始点在3点钟方向，下面我们可以验证一下），Math.PI表示180度，所以一个完整的圆是Math.PI*2。
下面来验证起始点为0的情况，起始点的位置。
var canvas = document.getElementsByTagName('canvas')[0];
var c = canvas.getContext('2d');
c.beginPath();
c.arc(200, 200, 50, 0, Math.PI * 1, false);
c.strokeStyle = "red";
c.stroke();
c.closePath();
效果图：
因为绘制方向我们选择的false,所以是顺时针绘制。在效果图可以看到当起点位置为0的时候，起始点就是在3点钟方向。
3.画矩形
绘制矩形的方法：
开始路径与结束路径以及描边填充颜色都与上面的一样，我这里就不再赘述了。
绘制矩形同样也有两个方法，一种只有边框，一种直接填充。
| 方法 | 描述 |
|---|---|
| fillStyle/strokeStyle | 设置填充或者描边颜色 |
| fillRect(x,y,width,height) | 绘制矩形（填充） |
| storkeRect(x,y,width,height) | 绘制矩形（描边） |
参数解释：
- 在fillRect(x,y,width,height)/strokeRect(x,y,width,height)方法中有四个参数，x:代表
注意：fillStyle/strokeStyle一定要写在fillRect/strokeRect之前，否则不起作用。
例子：
var canvas = document.getElementsByTagName('canvas')[0];
var c = canvas.getContext('2d');
c.beginPath();
c.fillStyle = "red";
c.fillRect(50, 50, 100, 100);
c.closePath();
c.beginPath();
c.strokeStyle = "orange";
c.strokeRect(50, 160, 100, 100);
c.closePath();
这里为了节约篇幅，此处没有html代码canvas宽高为400*400。css中我设置一个1px的边框以及#ccc的背景颜色
效果图：
