h5-拖放

設定元素可拖動屬性

draggable="true"

拖放元素事件：事件物件為被拖拽元素（拖動的元素）
dragstart:拖拽前觸發
drag：拖拽前、拖拽結束之間，連續觸發
dragend:拖拽結束觸發

目標元素事件：目標元素為存放拖動物件的元素
dragenter:進入目標元素觸發，相當於mouseover
dragover:進入目標，離開目標之間，連續觸發
dragleave:離開目標元素觸發，相當於mouseout
drop:在目標元素上釋放滑鼠觸發（也就是拖放完成的時候 ）

解決火狐下的問題：必須設定dataTransfer物件的setData方法才可以拖拽除圖片外的其他標籤

dataTransfer物件：

setData():設定資料key和value（必須是字串）

getData():獲取資料，根據key值，獲取對應的value

effectAllowed:設定游標樣式（none,copy,copyLink,copyMove,link,linkMove all和uninitialized）

setDragImage:三個引數，指定的元素，座標X，座標Y，拖動元素時滑鼠在元素的位置

files:獲取外部拖拽的檔案，返回一個filesList列表

fileList下有個type屬性，返回檔案的型別

fileReader(讀取檔案資訊)：
readAsDataURL:引數為要讀取的檔案物件，將檔案讀取為DataUrl

canvas 畫布

<canvas>不支援canvas瀏覽器</canvas>內容寫在canvas標籤中    預設：寬300 高150

繪製環境：getContext('2d'):目前只支援2d的場景 

        <canvas id="box" width="400" height="400"><!--canvas 畫布-->
            <span>瀏覽器不支援的時候顯示</span>
        </canvas>
        <!--預設的寬:300px  高150px-->
        <script type="text/javascript">
            var
 
 oBox=document.getElementById("box");
            //getContext("2d");  是html5當中內建的物件,擁有折線 、圓形等等繪製圖像的方法
            var oCanvas=oBox.getContext("2d")
            
            console.log(oCanvas)
        </script>

繪製方塊

fillRect（L,T,W,H）預設顏色為黑色 , 實心方塊

strokeRect（L,T,W,H），空心方塊

設定繪圖

 ctx.fillStyle="#FF0000"; 填充顏色 （預設為黑）

lineWidth:線寬度，是一個數值

strokeStyle;邊線顏色

邊界繪製

lineJoin 邊界連線點樣式 （邊框角）

mlter(預設)、round(圓角) 、bevel（斜角）

lineCap 端點樣式（想要看端點需要先）

butt 預設 、round(圓角) 、square(高度多出為寬一半的值)

繪製路徑

beginPath(); 開始繪製路徑

closePath(); 結束繪製路徑

moveTo(x,y) 定義線條開始座標

lineTo(x,y) 定義線條結束座標

stroke:畫線，預設黑色

fill 填充，預設黑色

rect:矩形區域

clearRect: 刪除一個畫布的矩形區域

save:儲存路徑

restore:恢復路徑 

繪製圓

arc(x,y,半徑，起始弧度，結束弧度，旋轉方向)
x,y起始位置
弧度與角度的關係：弧度=角度*Math.PI/180;
旋轉方向：順時針（預設：false）、逆時針（true）

文字

strokeText(text,x,y) - 在 canvas 上繪製空心的文字

fillText(text,x,y) - 在 canvas 上繪製實心的文字

font - 定義字型

textAlign: 預設是 start跟 left一樣的效果，end right center
textBaseline 文字上下的位置的方式預設 alphabetic

measureText(str).width; 只有寬度，沒有高度

陰影：
shadowOffectX、shadowOffectY X軸偏移Y軸偏移
shadowBlur 高斯模糊值
shadowColor 陰影顏色