【画布---H5的新增技术】
目录
一.H5（HTML5）的新增技术
1.绘画：画布（canvas）的使用
2.画布：页面中用于绘画图形的特殊区域，开发人可以在这个区域内进行自定义图形的绘制
（1）创建画布的方法：
（2）获取画布：getElementById('canvas的id')
（3）获取画笔：使用context对象，语法格式是：
（4）绘制直线：直线的起始点、直线的终点、描边（设置线条的颜色）
（5）设置描边的颜色：context.strokeStyle = 'pink' //设置描边的颜色。颜色值可以是十六进制、颜色名
（6）设置端点的形状：使用lineCap = '属性值' 来设置端点的形状，取值有三种
（7）路径的重置：beginPath()
（8）闭合路径：closePath()
（9）设置线宽：lineWidth = '数值'
（10）填充路径：fill()
（11）设置填充颜色：fillStyle = '颜色'
（12）画弧线或画圆：arc(x,y,r,开始角,结束角,方向)
（13）画矩形：rect(x,y,width,height)，x和y表示矩形左上角的坐标
（14）填充矩形：fillRect(x,y,width,height)，x和y表示矩形左上角的坐标
（15）绘制文本：context.fillText(text,x,y)，text表示要绘制的文本，x和y表示坐标位置
（16）平移当前的坐标系：context.translate(x,y)
（17）设置坐标系的旋转角度：context.rotate(deg)
（18）绘制图像：fillImage(image,x,y)
笑脸
绘制验证码
一.H5（HTML5）的新增技术
1.绘画：画布（canvas）的使用
2.画布：页面中用于绘画图形的特殊区域，开发人可以在这个区域内进行自定义图形的绘制
（1）创建画布的方法：
（2）获取画布：getElementById('canvas的id')
（3）获取画笔：使用context对象，语法格式是：
let context = canvas.getContext('2d') //context代表的是一支笔（4）绘制直线：直线的起始点、直线的终点、描边（设置线条的颜色）
let canvas = document.getElementById('canvas') //获取画布
let context = canvas.getContext('2d') //获取画笔
context.moveTo(100,100) //确定起始点(100,100) ，即将画笔移动到该点上。
context.lineTo(200,200) //确定线条的另一个端点（终点）（200，200）.
context.strokeStyle = 'pink' //设置描边的颜色
context.stroke() //进行描边，让线条可见（默认的画笔颜色为黑色）（5）设置描边的颜色：context.strokeStyle = 'pink' //设置描边的颜色。颜色值可以是十六进制、颜色名
（6）设置端点的形状：使用lineCap = '属性值' 来设置端点的形状，取值有三种
butt：默认值，无端点，显示的是线条的方形边缘
round：显示圆形端点
square：显示方形端点
（7）路径的重置：beginPath()
（8）闭合路径：closePath()
（9）设置线宽：lineWidth = '数值'
（10）填充路径：fill()
（11）设置填充颜色：fillStyle = '颜色'
（12）画弧线或画圆：arc(x,y,r,开始角,结束角,方向)
x,y：确定圆心的坐标
r：表示圆形或弧线的半径
开始角：表示弧点的起始位置，通常用Math.PI表示(可以理解为180度)
结束角：表示弧点的结束位置
方向：表示绘图的方向（逆时针、顺时针）。为true，表示逆时针，默认值为false，表示顺时针
（13）画矩形：rect(x,y,width,height)，x和y表示矩形左上角的坐标
（14）填充矩形：fillRect(x,y,width,height)，x和y表示矩形左上角的坐标
（15）绘制文本：context.fillText(text,x,y)，text表示要绘制的文本，x和y表示坐标位置
（16）平移当前的坐标系：context.translate(x,y)
（17）设置坐标系的旋转角度：context.rotate(deg)
（18）绘制图像：fillImage(image,x,y)
笑脸
绘制验证码
（1）随机颜色：随机生成 r、g、b 值
a、定义生成随机数函数：
// 1.随机数function random(min,max){return parseInt(Math.random()*(max-min)+min)}b、随机生成 r、g、b颜色值
// 2.随机颜色function color(min,max){var r = random(min,max)var g = random(min,max)var b = random(min,max)return `rgb(${r},${g},${b})`}c、设置绘制验证码的区域：矩形、浅色背景
// 3.绘制验证码区域// 3.1设置宽高var width = 120var height = 40// 3.2获取画笔let context = document.getElementById('canvas').getContext('2d')// 3.3设置填充颜色,浅色context.fillStyle = color(180,230)// 3.4设置区域形状大小context.fillRect(0,0,width,height)（2）随机文本：随机生成下标，通过下标在字符串或数组中拿到对应的字符
// 4.随机字符串function newchar(arr){var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'for (let i = 0; i < 4; i++) { //生成4个随机的字符var char = str[random(0,str.length)] //随机的字符var font_size = random(18,40) //字体大小var deg = random(-30,30) //旋转角度context.font = font_size + 'px Simhei' //设置字号、字体context.textBaseline = 'top' //设置文本基线：以上边框为界context.fillStyle = color(80,150) //设置填充颜色context.save() //保存前面对画笔的设置context.translate(30*i+15,15) //平移坐标系context.rotate(deg*Math.PI/180) //绘制偏转角度context.fillText(char,-15+5,-15) //绘制文本context.restore() //清除前面画笔的设置，画笔恢复到初始状态arr[i] = char.toLowerCase()}}（3）随机画线条（干扰线）：端点坐标随机生成、线条的角度随机设置
// 5.随机线条for (let i = 0; i < 5; i++) {context.beginPath() //重置路径context.moveTo(random(0,width),random(0,height)) //设置线条的起点context.lineTo(random(0,width),random(0,height)) //设置线条的终点context.strokeStyle = color(180,230) //设置线条的随机颜色context.closePath() //关闭路径context.stroke() //描边}（4）随机画点：圆心坐标随机
// 6.随机产生的干扰小点for (let i = 0; i < 40; i++) {context.beginPath()context.arc(random(0,width),random(0,height),1,0,2*Math.PI) //随机确定圆心坐标context.closePath()context.fillStyle = color(150,200) //随机填充颜色context.fill() //进行填充}课堂练习：在文本框中输入验证码，判断是否正确。设置文本框的样式和验证码在一行中
请输入验证码：