画布

一、H5(HTML5)的新增技术

1、绘图:画布(canvas)的使用

2、画布:

页面中用于绘制图形的特殊区域,开发人员可以在这个区域内进行自定义图形的绘制

​ (1)创建画布的方法:

<canvas  id="画布的标识" width="宽度"  height="高度">
     您的浏览器不支持画布
</canvas>

​ (2)获取画布:getElementById(‘canvas的id’)

​ (3)获取画笔:使用context对象,语法格式是:

let  context = canvas.getContext('2d')  //context代表的是一支笔

​ (4)绘制直线:直线的起始点、直线的终点、描边(设置线条的颜色)

<script>
    let canvas = document.getElementById('canvas') //获取画布
    let context = canvas.getContext('2d') //获取画布
    context.moveTo(100,100) //确定起始点为(100,100) ,即将画笔移动到该点上。moveTo方法用来确定起始点
    context.lineTo(200,200) //确定线条的另一个端点,即终点(200,200)。
    context.stroke() //进行描边,让线条可见(默认的画笔颜色为黑色)
</script>

(5)设置描边的颜色:context.strokeStyle = ‘red’ //设置描边的颜色。颜色值可以是十六进制、颜色名

​ (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、定义生成随机数函数:

function rn(min,max){ //随机数函数
    return  parseInt(Math.random()*(max-min)+min);
}

        ​ b、随机生成 r、g、b颜色值

function rc(min,max){ //随机颜色的函数
    var r=rn(min,max);
    var g=rn(min,max);
    var b=rn(min,max);
  return `rgb(${r},${g},${b})`;
 }

​         c、设置绘制验证码的区域:矩形、浅色背景

var w=120;
var h=40;
var ctx=document.getElementById('canvas').getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h); //在0,0的位置填充一个120*40的矩形

​ (2)随机文本:随机生成下标,通过下标在字符串或数组中拿到对应的字符

  var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
            for(var i=0;i<4;i++){ //生成4个随机的字符
                var c=pool[rn(0,pool.length)];//随机的字符
                var fs=rn(18,40);//字体的大小
                var deg=rn(-30,30);//字体的旋转角度
                ctx.font=fs+'px Simhei'; //设置字号、字体
                ctx.textBaseline="top"; //绘制文本的基线:以上边线为界
                ctx.fillStyle=rc(80,150); //设置填充颜色
                ctx.save(); //保存前面对画笔的设置
                ctx.translate(30*i+15,15); //平移坐标系
                ctx.rotate(deg*Math.PI/180); //设置偏转角度
                ctx.fillText(c,-15+5,-15); //绘制文本
                ctx.restore(); //清除前面画笔的设置,画笔恢复到初始状态
            }

​ (3)随机画线条(干扰线):端点坐标随机生成、线条的角度随机设置

for(var i=0;i<5;i++){
   ctx.beginPath(); //重置路径
   ctx.moveTo(rn(0,w),rn(0,h)); //设置线条的起点
   ctx.lineTo(rn(0,w),rn(0,h)); //设置线条的终点
   ctx.strokeStyle=rc(180,230); //设置线条的随机颜色
   ctx.closePath(); //关闭路径
   ctx.stroke(); //描边
}

​ (4)随机画点:圆心坐标随机

for(var i=0;i<40;i++){
      ctx.beginPath();
      ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); //随机确定圆心坐标
      ctx.closePath();
      ctx.fillStyle=rc(150,200); //随机的填充色
      ctx.fill(); //进行填充
}

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值