摘要：立即對當(dāng)前矩形進行填充清除矩形語法解釋清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦繪制圓形概述方法創(chuàng)建弧曲線用于創(chuàng)建圓或部分圓語法解釋圓心坐標(biāo)，半徑大小，繪制開始的角度。

給標(biāo)簽設(shè)置一個draggable設(shè)置為true, 標(biāo)簽就可以拖拽了

ondragstart 拖拽前觸發(fā)

ondragend 拖拽結(jié)束觸發(fā)

ondrag 拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā)

看實例：

ondragenter 進入目標(biāo)元素觸發(fā)，相當(dāng)于mouserover

ondragover 進入目標(biāo)，離開目標(biāo)之間，連續(xù)觸發(fā)

ondragleave 離開目標(biāo)元素觸發(fā)，相當(dāng)于mouseout

ondrop 在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)(要想觸發(fā)drop事件，就必須在ondragover的時間中阻止默認(rèn)事件)

setData() : 設(shè)置數(shù)據(jù) key 和 value (必須是字符串)

getData() : 獲取數(shù)據(jù)，根據(jù) key 值，獲取對應(yīng)的value

effectAllowed : 拖住到相應(yīng)區(qū)域時顯示的光標(biāo)樣式(none、copy、copyLink、copyMove、link、linkMove、move、all、和uninitialized)

setDragImage() (當(dāng)這個傳遞的節(jié)點隱藏的時候只支持Firefox)

他是拖住時顯示的圖形和樣式 ， 有三個參數(shù)：指定的元素(指點的陰影樣式)，坐標(biāo)X 坐標(biāo)Y(x、y是拖拽時鼠標(biāo)的位置)

小案例：

     #box{margin-left:150px;}
    #box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;}

實例效果圖:

files (獲取外部拖拽的文件，返回一個filesList列表)

length (event.dataTransfer.files.length)

Type(event.dataTransfer.files[0].type) 比如：圖片的是(image/jpeg)

FileReader 對象(讀取文件信息)

方法一：readAsDataURL():參數(shù)為要讀取的文件對象，將文件讀取為DataUrl
方法二：Onload()事件函數(shù):當(dāng)函數(shù)文件讀取成功完成的時候觸發(fā)此事件。（this.result用來獲取讀取到的文件數(shù)據(jù)，如果是圖片，將返回base64格式的圖片數(shù)據(jù)）

小案例：拖拽文件上傳：

    #box{width:200px;height:200px;line-height:200px;text-align:center;border:5px dashed #eeee;background:pink;}

     
請將圖片拖到此區(qū)域
    

    

canvas是HTML5提供的一種新標(biāo)簽

canvas是一個矩形區(qū)域的畫布，可以用JavaScript在上面繪畫

canvas 標(biāo)簽使用 JavaScript 在網(wǎng)頁上繪制圖像，本身不具備繪圖功能

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

HTML5之前的web頁面只能用一些固定樣式的標(biāo)簽：比如p、div、h1等，但有了canvas Web頁面可以可以豐富多彩

游戲。canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛

可視化數(shù)據(jù).數(shù)據(jù)圖表，比如:百度的echart

banner廣告：Flash曾經(jīng)輝煌的時代，智能手機還未曾出現(xiàn)。現(xiàn)在以及未來的智能機時代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用，用Canvas實現(xiàn)動態(tài)的廣告效果再合適不過

標(biāo)簽名canvas，需要進行閉合。就是一普通的html標(biāo)簽

可以設(shè)置width和height屬性，但是屬性值單位必須是px，否則忽略

width和hegiht：默認(rèn)300*150像素

注意：1.不要用CSS控制它的寬和高,會走出圖片拉伸

??????????????????2.重新設(shè)置canvas標(biāo)簽的寬高屬性會讓畫布擦除所有的內(nèi)容

??????????????????3.可以給canvas畫布設(shè)置背景色

上下文：上知天文，下知地理。是所有的繪制操作api的入口或者集合。

Canvas自身無法繪制任何內(nèi)容。Canvas的繪圖是使用JavaScript操作的

Context對象就是JavaScript操作Canvas的接口

使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文

canvas 的坐標(biāo)系從最左上角開始(0,0) .X 向右增大，Y向下增大

語法：ctx.moveTo(x,y)

解釋：設(shè)置上下文繪制路徑的起點。相當(dāng)于移動畫筆到某個位置

參數(shù)：x，y都是相對于canvas盒子的最左上角

注意：1. 繪制線段錢必須先設(shè)置起點，不然繪制無效

???????????????????2.如果不設(shè)置起點，就會使用lineTo 的坐標(biāo)當(dāng)做moveTo

語法：ctx.lineTo(x,y)

解釋：從x，y的位置繪制一條直線到起點或者上一個線頭點

x，y 線頭點坐標(biāo)

繪制第一條直線：

開始路徑：ctx.beginPath();

閉合路徑：ctx.closePath();

解釋：如果復(fù)雜路徑繪制，必須使用路徑開始和結(jié)束，閉合路徑會自動把最后的線頭和開始的線頭連在一起

beginPath: 核心的作用是將不同繪制的形狀進行隔離，每次執(zhí)行此方法，表示重新繪制一個路徑，跟之前繪制的墨跡可以進行分開樣式設(shè)置和管理

畫一個三角形：

語法：ctx.stroke();

解釋：根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke

canvas 繪制的基本步驟

獲得上下文 →canvasElem.getContext("2d");

開始路徑規(guī)劃 →ctx.beginPath()

移動起始點 → ctx.moveTo(x, y)

繪制線(矩形、圓形、圖片...) → ctx.lineTo(x, y)

閉合路徑 → ctx.closePath();

繪制描邊 → ctx.stroke();

語法：ctx.fill();

解釋：填充是將閉合路徑的內(nèi)容填充具體的顏色。默認(rèn)黑色

eg：

語法：ctx.rect(x, y, width, height)

解釋：x, y是矩形左上角坐標(biāo)， width和height都是以像素計

rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊

語法： ctx.strokeRect(x, y, width, height)

注意此方法繪制完路徑后立即進行stroke繪制

語法2：ctx.fillRect(x, y, width, height)

此方法執(zhí)行完成后。立即對當(dāng)前矩形進行fill填充
eg：

eg:

語法：ctx.clearRect(x,y,w,h);

解釋：清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦

語法：ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

解釋：x,y 圓心坐標(biāo)，r 半徑大小，sAngle:繪制開始的角度。圓心到最右邊點為0度，順時針方向弧度增大。eAngle：結(jié)束的角度，注意是弧度( π)。counterclockwise：是否是逆時針，true是逆時針，false：順時針

弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180

eg:

eg:

var img = document.getElementById("imgId")

var img = new Image();//這個就是 img標(biāo)簽的dom對象

img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
    //圖片加載完成后，執(zhí)行此方法

語法：context.drawImage(img,x,y);

解釋：x,y繪制的是圖片左上角的坐標(biāo)，img 是繪制圖片的 dom 對象

eg:

語法：context.drawImage(img,x,y,width,height)

解釋：width繪制圖片的寬度，height 繪制圖片的高度

注意：如果指定寬高，最好成比例，不然圖片會被拉伸

等比公式：設(shè)置高 = 原高度 * 設(shè)置寬/ 原寬度

eg：

### 2.7.4 圖片裁剪，并在畫布上定位被裁剪的部分

語法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

參數(shù)說明：sx，sy裁剪的左上角坐標(biāo)，swidth：裁剪圖片的寬度，sheight：裁剪的高度。

eg:

audio

音頻標(biāo)簽 ， 使用 controls = "" 將控件展示出來

video

視頻標(biāo)簽，使用 controls = "" 將控件展示出來

source

   
   使用source標(biāo)簽可以設(shè)置多個源        
   
   
   
   
   
   
   
   

controls:顯示或隱藏用戶控制界面

autoplay：媒體是否自動播放

loop：媒體是否循環(huán)播放

eg：

    
 
注意：autoplay 屬性在谷歌瀏覽器中不支持，所以小編在這里用了一個setInterval方法，這個屬性在火狐瀏覽器中是可以實現(xiàn)的。

3.2.2 音視頻在js中DOM的屬性和方法

currentTime ： 目前播放的時間點
duration：媒體總時間(只讀)
volume:0.0-1.0的音量相對值
muted：是否靜音
paused：媒體是否暫停(只讀)
ended：媒體是否播放完畢(只讀)
error：媒體發(fā)生錯誤的時候，返回錯誤代碼(只讀)
currentSrc：以字符串的形式返回媒體地址(只讀)
play：媒體播放
pause：媒體暫停
load：重新加載媒體

eg：
    
    
    
    
    

3.2.3 事件綁定
補充知識點：addEventListener(type, fn, false)
false，表示不使用捕獲（useCapture）
#### 3.2.3.1 DOM事件的三個階段

捕獲階段：先由文檔的根節(jié)點document往事件觸發(fā)對象，從外向內(nèi)捕獲事件對象
目標(biāo)階段：到達目標(biāo)事件位置（事發(fā)地），觸發(fā)事件
冒泡階段：再從目標(biāo)事件位置往文檔的根節(jié)點方向回溯，從內(nèi)向外冒泡事件對象
注意: 當(dāng)事件觸發(fā)在目標(biāo)階段時，會根據(jù)事件注冊的先后順序執(zhí)行，在其他兩個階段注冊順序不影響事件執(zhí)行順序。也就是說如果該處既注冊了冒泡事件，也注冊了捕獲事件，則按照注冊順序執(zhí)行。

3.2.4 音視頻綁定事件
    
    

3.2.5 音視頻的事件綁定
loadstart   開始加載
progress  運行的進度
suspend 
emptied 
stalled 
play  播放
pause  暫停
loadedmetadata  
loadeddata 
waiting  等待
playing 
canplay 
canplaythrough 
seeking 
seeked 
timeupdate 
ended  結(jié)束
ratechange 
durationchange 
Volumechange
小編寄語：單詞有點多，我這里不一一翻譯了，用的時候搜一下。
四、總結(jié)
雖然多，但是很好理解，多記記單詞而已，相信自己！