1.绘制线条和填充
1.绘制线段的API是上下文对象的方法；
2.beginPath：开始定义一条新的路径；
3.moveTo：开始定义一条新的子路径，该方法确定了线段的起点；
4.lineTo：将上面定义的线段起点和指定的新的点连接起来；
5.到这里只是规划好了思路，还没有在画布上画出任何图形；
6.fill()：填充区域，此时只是填充，起点和终点并没有连接起来；
7.closePath：会把起点和终点连接起来；
8.stroke()：开始绘制图形，当前路径下的所有子路经都会绘制出来；
9.如果要接着绘制新的路径，记得调用beginPath()方法；
2.矩形的绘制
1）rect()：在当前子路经添加一条弧线；
语法：context.rect(x,y,width,height);
四个参数： 起点坐标x,y：左上角坐标； 宽度width：矩形的宽度； 高度height：矩形的高度；
（2）strokeRect()方法可以直接绘制一个矩形；
语法：context.strokeRect(x,y,width,height);
3.曲线的绘制和填充
arc()：在当前子路经添加一条弧线；
语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| x |
圆的中心的 x 坐标。 |
| y |
圆的中心的 y 坐标。 |
| r |
圆的半径。 |
| sAngle |
起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle |
结束角，以弧度计。 |
| counterclockwise |
可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
例1：绘制线条画一个三角形
<style>
#box {
border: 1px gray solid;
/* width:200px;
height: 200px; *///宽高不写在css中写在canvas标签中
}
</style>
<canvas id="box" width="600" height="600">
</canvas>
<script>
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d") //Context 上下文
ctx.lineWidth=5//线条宽度
ctx.strokeStyle="yellow"//线条颜色
ctx.moveTo(100, 100)
ctx.lineTo(300, 300)
ctx.moveTo(400, 100)
ctx.lineTo(100, 100)
ctx.moveTo(400, 100)
ctx.lineTo(300, 300)
ctx.closePath()
ctx.stroke()
</script>
其中的js代码可等效为：
//lineTo 会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点
ctx.lineTo(100, 100)
ctx.lineTo(300, 300)
ctx.lineTo(400, 100)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
lineTo 会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点。
例2：线条绘制矩形及填充
<style>
#box {
border: 1px gray solid;
}
</style>
<canvas id="box" width="600" height="600">
</canvas>
<script>
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d") //Context 上下文
//线条绘制矩形
ctx.moveTo(200,300)
ctx.lineTo(200,500)
ctx.lineTo(400,500)
ctx.lineTo(400,300)
ctx.lineTo(200,300)
ctx.closePath()//闭合轨迹 会把线连接到某一点形成闭合轨迹
ctx.strokeStyle="red"
ctx.lineWidth=3
ctx.stroke()
ctx.fillStyle="greenyellow"
ctx.fill()//把闭合轨迹填充上颜色，默认颜色是黑色
</script>
直接绘制矩形
绘制矩形
ctx.rect(200,100,300,400)
ctx.stroke()
ctx.fillStyle="greenyellow"
ctx.fill()
ctx.fillStyle="blue"
ctx.fillRect(200,100,300,400)
例3:绘制一段曲线
<style>
#box {
border: 1px gray solid;
}
</style>
<canvas id="box" width="600" height="600">
</canvas>
<script>
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d") //Context 上下文
ctx.lineWidth=5
let deg=Math.PI/180
ctx.arc(300,300,200,0*deg,270*deg,true)
ctx.stroke()
</script>
