canvas绘制线条、矩形、曲线及填充

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>