HTML5拖拽学习，canvas画布，

#拖拽学习要点  

- draggable

- οndragstart="drag(event)"

- οndrοp="drop(event)"

- οndragοver="fun2(event)"

- dataTransfer  

- preventDefault



###draggable

主要用false或者true来设置文本或者图片是否可以在页面拖拽  



###ondragstart  

主要在文本或者图片要拖拽的区域绑定事件，将event对象传过去--开始进行拖拽



     function start(e){

            e.dataTransfer.setData("Text",e.target.id);

        }





###ondrop

主要用于绑定事件到你想拖拽到你想要的div里面或者是其他标签里面(同样要将event对象传过去)



    function drop(e){

            var data = e.dataTransfer.getData("Text");

            e.target.appendChild(document.getElementById(data));

            e.preventDefault();

        }



###ondragover

主要用于拖拽完毕后的绑定事件



    function over(e){

            e.preventDefault();

        }



###dataTransfer

主要用于把需要拖拽的文本或者图片向拖放区传递数据的时候用，后面有以下属性：

（setData）当前要拖拽的数据 （getData）把准备需要拖拽的数据返回到要放到的地方



###preventDefault

preventDefault()； 阻止浏览器默认行为

利用画布绘制矩形  

      //获取canvas对象

      var canvas1=document.getElementById("first");

      //给canvas插入画笔

      var cxt=canvas1.getContext("2d")

      //准备绘制颜色

        cxt.fillStyle="red"

      //填充矩形：里面的4个参数分别为，X和Y轴放的位置,W和H设置矩形宽高;

        cxt.fillRect(0,0,100,100)  

两个矩形重叠  

        cxt.fillStyle="red"

        cxt.fillRect(0,0,100,100)

        cxt.fillStyle="blue"

        cxt.fillRect(60,60,100,100)  



每画一个矩形或者其他什么形状都需要在设置一下两个方法  

> cxt.beginPath();  //开始绘制

> cxt.closePath();  //结束绘制  



        cxt.fillStyle = "#1CA919";

        cxt.beginPath();

        cxt.fillRect(80,105,120,85);

        cxt.closePath();  

背景渐变  

        var my_gradient=cxt.createLinearGradient(0,0,0,300);

        my_gradient.addColorStop(0,"#6D76FA");

        my_gradient.addColorStop(0.5,"white")        

        my_gradient.addColorStop(1,"#A4C9FA");

        cxt.fillStyle=my_gradient;

        cxt.fillRect(0,0,1000,400);  

字体渐变  

    cxt.font="40px Verdana";

    var gradient=cxt.createLinearGradient(0,0,170,0);

    gradient.addColorStop("0","#A4C9FA");

    gradient.addColorStop("0.5","white");

    gradient.addColorStop("1.0","blue");

    cxt.strokeStyle=gradient;

    cxt.strokeText("书中只有黄金屋",20,100);  

图片展示  

    var img=new Image();

    img.src="20664369-1_b.jpg";

    img.onload = function()

    {

     cxt.drawImage(img,550,80,200,200);

    }  

图片剪切  

    var img=new Image();

    var img1=new Image();           

    img.src='20664369-1_b.jpg';           

    img.οnlοad=function(){

        cxt.drawImage(img,28,0,145,200,5,10,200,200);

    }

        img1.οnlοad=function(){

        cxt.drawImage(img1,30,0,140,193,200,205,200,200);

    }  

矩形旋转  

    ctx.fillStyle="yellow"; 

    ctx.fillRect(0,0,250,100);

    ctx.setTransform(1,0.5,-0.5,1,30,10);

 
矩形缩放  

    ctx.strokeRect(5,5,25,15); ctx.scale(2,2);

    ctx.strokeRect(5,5,25,15); ctx.scale(2,2);

    ctx.strokeRect(5,5,25,15); ctx.scale(2,2);

    ctx.strokeRect(5,5,25,15);  

>save()的意思是保存之前的状态，restore()之后就回到你save的那个时候的状态
 

转载于:https://www.cnblogs.com/hexiaoyi/p/4715487.html