HTML5 Audio(音頻)
定義和用法
<audio src="someaudio.wav" controls="controls"> 您的瀏覽器不支持 audio 標籤。 </audio>
提示：能夠在開始標籤和結束標籤之間放置文本內容，這樣老的瀏覽器就能夠顯示出不支持該標籤的信息。html
音頻格式的MIME類型
| Format |
MIME-type |
| MP3 |
audio/mpeg |
| Ogg |
audio/ogg |
| Wav |
audio/wav |
屬性
| 屬性 |
值 |
描述 |
| autoplay |
autoplay |
若是出現該屬性，則音頻在就緒後立刻播放。 |
| controls |
controls |
若是出現該屬性，則向用戶顯示控件，好比播放按鈕。 |
| loop |
loop |
若是出現該屬性，則每當音頻結束時從新開始播放。 |
| muted |
muted |
規定視頻輸出應該被靜音。 |
| preload |
preload |
若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。 |
| src |
url |
要播放的音頻的 URL。 |
最小Demo代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio src="someaudio.wav" controls="controls"> 您的瀏覽器不支持 audio 標籤。 </audio>
</body>
</html>
src能夠修改本身的本地路徑，請注意調節音量再播放html5
《光》陳粒
web
HTML5 Video(視頻)
<video src="movie.mp4" controls="controls"> 您的瀏覽器不支持 video 標籤。 </video>
視頻格式
| 格式 |
MIME-type |
| MP4 |
video/mp4 |
| WebM |
video/webm |
| Ogg |
video/ogg |
HTML5 Audio/Video 方法
| 方法 |
描述 |
| addTextTrack() |
向音頻/視頻添加新的文本軌道 |
| canPlayType() |
檢測瀏覽器是否能播放指定的音頻/視頻類型 |
| load() |
從新加載音頻/視頻元素 |
| play() |
開始播放音頻/視頻 |
| pause() |
暫停當前播放的音頻/視頻 |
只是經常使用的一些方法，具體用到更多再查。canvas
最小Demo代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="video.mp4" controls="controls"> 您的瀏覽器不支持 video 標籤。 </video>
</body>
</html>
HTML5 Canvas
HTML5 canvas 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.瀏覽器
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
建立canvas元素， 再使用 style 屬性來添加邊框。網絡
顏色、樣式和陰影
| 屬性 |
描述 |
| fillStyle |
設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle |
設置或返回用於筆觸的顏色、漸變或模式 |
| shadowColor |
設置或返回用於陰影的顏色 |
| shadowBlur |
設置或返回用於陰影的模糊級別 |
| shadowOffsetX |
設置或返回陰影距形狀的水平距離 |
| shadowOffsetY |
設置或返回陰影距形狀的垂直距離 |
| 方法 |
描述 |
| createLinearGradient() |
建立線性漸變（用在畫布內容上） |
| createPattern() |
在指定的方向上重複指定的元素 |
| createRadialGradient() |
建立放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() |
規定漸變對象中的顏色和中止位置 |
Canvas - 漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<div>
<div> 線性漸變:</div>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<div>
<div> 徑向/圓漸變:</div>
<canvas id="myCanvas2" width="200" height="200"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 建立漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 建立漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
線條樣式
| 屬性 |
描述 |
| lineCap |
設置或返回線條的結束端點樣式 |
| lineJoin |
設置或返回兩條線相交時，所建立的拐角類型 |
| lineWidth |
設置或返回當前的線條寬度 |
| miterLimit |
設置或返回最大斜接長度 |
矩形
| 方法 |
描述 |
| rect() |
建立矩形 |
| fillRect() |
繪製「被填充」的矩形 |
| strokeRect() |
繪製矩形（無填充） |
| clearRect() |
在給定的矩形內清除指定的像素 |
路徑
| 方法 |
描述 |
| fill() |
填充當前繪圖（路徑） |
| stroke() |
繪製已定義的路徑 |
| beginPath() |
起始一條路徑，或重置當前路徑 |
| moveTo() |
把路徑移動到畫布中的指定點，不建立線條 |
| closePath() |
建立從當前點回到起始點的路徑 |
| lineTo() |
添加一個新點，而後在畫布中建立從該點到最後指定點的線條 |
| clip() |
從原始畫布剪切任意形狀和尺寸的區域 |
| quadraticCurveTo() |
建立二次貝塞爾曲線 |
| bezierCurveTo() |
建立三次方貝塞爾曲線 |
| arc() |
建立弧/曲線（用於建立圓形或部分圓） |
| arcTo() |
建立兩切線之間的弧/曲線 |
| isPointInPath() |
若是指定的點位於當前路徑中，則返回 true，不然返回 false |
Canvas - 路徑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
轉換
| 方法 |
描述 |
| scale() |
縮放當前繪圖至更大或更小 |
| rotate() |
旋轉當前繪圖 |
| translate() |
從新映射畫布上的 (0,0) 位置 |
| transform() |
替換繪圖的當前轉換矩陣 |
| setTransform() |
將當前轉換重置爲單位矩陣。而後運行 transform() |
文本
| 屬性 |
描述 |
| font |
設置或返回文本內容的當前字體屬性 |
| textAlign |
設置或返回文本內容的當前對齊方式 |
| textBaseline |
設置或返回在繪製文本時使用的當前文本基線 |
| 方法 |
描述 |
| fillText() |
在畫布上繪製「被填充的」文本 |
| strokeText() |
在畫布上繪製文本（無填充） |
| measureText() |
返回包含指定文本寬度的對象 |
Canvas - 文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("小橘子ღ",10,100);
ctx.strokeText("Hi~ Canvas",10,50);
</script>
</body>
</html>
圖像繪製
Canvas - 圖像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<img id="scream" src="https://pic.cnblogs.com/avatar/1979230/20200321083100.png" alt="小橘子ღ">
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"> 您的瀏覽器不支持 canvas 標籤。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10)//若不顯示畫像則註釋這行，取消註釋下面三行
// img.onload = function(){
// ctx.drawImage(img, 10, 10)
// }
</script>
</body>
</html>
注意：這裏有個坑，考慮到圖片是從網絡加載，若是 drawImage 的時候圖片尚未徹底加載完成，則什麼都不作。即繪圖失敗。ide
因此咱們應該保證在 img 繪製完成以後再 drawImage。oop
var img = new Image(); // 建立img元素
img.src = 'https://pic.cnblogs.com/avatar/1979230/20200321083100.png'; // 設置圖片源地址
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
像素操做
| 屬性 |
描述 |
| width |
返回 ImageData 對象的寬度 |
| height |
返回 ImageData 對象的高度 |
| data |
返回一個對象，其包含指定的 ImageData 對象的圖像數據 |
| 方法 |
描述 |
| createImageData() |
建立新的、空白的 ImageData 對象 |
| getImageData() |
返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據 |
| putImageData() |
把圖像數據（從指定的 ImageData 對象）放回畫布上 |
合成
| 屬性 |
描述 |
| globalAlpha |
設置或返回繪圖的當前 alpha 或透明值 |
| globalCompositeOperation |
設置或返回新圖像如何繪製到已有的圖像上 |
進階操做字體
