HTML5拖拽學習，canvas畫布，

#拖拽學習要點  

- draggable

- ondragstart="drag(event)"

- ondrop="drop(event)"

- ondragover="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.onload=function(){

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

    }

        img1.onload=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的那個時候的狀態