目录

一.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()  //进行填充}

课堂练习：在文本框中输入验证码，判断是否正确。设置文本框的样式和验证码在一行中

请输入验证码：您的浏览器不支持画布

验证