H5 画布（canvas）的使用、元素的拖拽

一、画布（canvas）的使用

1. 绘图：画布（canvas）的使用

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

​ （1）创建画布的方法：

     您的浏览器不支持画布

（2）获取画布：getElementById(‘canvas的id’)

​（3）获取画笔：使用context对象，语法格式是：

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

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

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

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

    



    

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


    验证
    
    

二、元素的拖拽 (Drag和 Drop)

        元素的拖拽是H5的一个新的特性，是在页面中通过鼠标将元素从一个位置拖放到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
1. 实现过程：
（1）设置元素为可拖放：为了使元素可拖动，设置元素的draggable属性为true

（2）拖动什么：给document注册一个ondragstart事件

        ondragstart事件调用了一个函数，它规定了被拖动的数据
        a.将被拖放的对象保存起来（即让document记忆下来）

        b.在拖放的过程中可以设置被拖放对象的透明度

（3）放到何处：给document注册一个ondragover事件

        ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event,preventDefault) 方法(即: 浏览器会默认阻ondrop事件，所以必须在ondragover事件中阻止默认行为)

（4）当将被拖放的对象放到指定位置后，拖放的动作完成（拖放结束）：给document注册一个ondrop事件

2. 拖拽元素支持的事件

• ondrag: 应用于拖拽元素，在整个拖拽过程中都会调用
• ondragstart: 应用于拖拽元素，当拖拽开始时调用
• ondragleave: 应用于拖搜元素，当鼠标离开拖拽元素时调用
• ondragend: 应用于拖拽元素，当拖拽结束时调用

3. 目标元素支持的事件

• ondragenter: 应用于目标元素，当拖拽元素进入时调用
• ondragover: 应用于目标元素，当停留在目标元素上方时调用
• ondrop: 应用于目标元素，当在目标元素上方松开鼠标时调用
• ondragleave: 应用于目标元素，当鼠标离开目标元素时调用

4. 基本思想
（1）在拖放开始时在document中保存被拖放元素的id
（2）拖放结束时通过id找到被拖放的元素追加到文档流中

    

        
3
        
2
        
5
        
1
        
4
        
6
        百度一下