canvas
-
作用：进行图形绘制
-
一般使用场景：
- 图形化验证码
- 图形化报表绘制
- 游戏画面的绘制
设置画布
<canvas width="800" height="200"></canvas>
初始化画笔
// 1.获取canvas标签
let canvas = document.querySelector("canvas")
// 2.获取画笔操作 2d画笔
let pen = canvas.getContext("2d")
绘制线条
-
属性：
lineWidth：设置线条宽度strokeStyle：设置线条颜色lineCap：设置圆角效果
-
方法：
save()：保存样式到内存中restore()：重置样式为上一次内存中保存的样式beginPath：路径隔离，清除之前的路径moveTo(x轴坐标,y轴坐标)：绘制起点lineTo(x轴坐标,y轴坐标)：绘制下一个点stroke()：绘制在画面中
//1.保存默认样式 空样式
pen.save()
pen.beginPath()
//2.绘制第一条横线 （100，100） （300，100）
//绘制起点
pen.moveTo(100, 100)
//绘制终点
pen.lineTo(300, 100)
//3.设置样式
pen.lineWidth = 30//设置线条宽度
pen.strokeStyle = "green" //设置线条颜色
pen.lineCap = "round" //设置线条圆角样式
//4.呈现在画布中
pen.stroke()
//5.重置样式
pen.restore()
//绘制第二条线 （100，400） （300，400）
//6.路径隔离 清除之前的路径记录
pen.beginPath()
pen.moveTo(100, 400)
pen.lineTo(300, 400)
pen.lineWidth = 20
pen.strokeStyle = "pink"
pen.stroke()
//重置样式
pen.restore()
绘制三角形
-
属性
fillStyle：设置填充颜色
-
方法：
closePath()：设置路径闭合fill()：填充颜色显示在画布中
//进入绘制
pen.save()//保存初始化样式
pen.beginPath()//进行路径隔离
// 确定四个点 （100,50） (100 , 550) （ 400，550，） （100，50）pen.moveTo(100,50)
pen.lineTo(100,550)
pen.lineTo(400,550)
// pen.lineTo(100,50)
// 形成闭合图形
pen.closePath()
pen.strokeStyle = "pink"
pen.lineWidth = 30
//设置填充颜色
pen.fillStyle = "green"
//绘制在页面中
pen.stroke()
//填充在页面中
pen.fill()
绘制矩形
-
绘制线条矩形
//(x轴坐标,y轴坐标,宽,高) pen.strokeRect(50,50,500,400) -
绘制实心矩形
//(x轴坐标,y轴坐标,宽,高) pen.fillRect(50,50,500,400) -
确定矩形区域
pen.rect(50,50,500,400)
绘制圆形
pen.arc(圆形x轴坐标,圆形y轴坐标，半径，起始角度，终点角度,是否为逆时针) Math.PI 表示180度
pen.arc(300,300,50,0,Math.PI*2,true)
绘制文字
//设置文字样式
pen.font = "bold 50px 楷体"
//设置文字样式
pen.fillText("123",50,50)
