## 圖像與視頻
基礎語法：
```
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
```
參數：
- image：繪制到上下文的元素。允許任何的 canvas 圖像源。例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。
- dx：目標畫布的左上角在目標canvas上 X 軸的位置。
- dy：目標畫布的左上角在目標canvas上 Y 軸的位置。
- dWidth：在目標畫布上繪制圖像的寬度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片寬度不會縮放。
- dHeight：在目標畫布上繪制圖像的高度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片高度不會縮放。
- sx：需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 X 坐標。
- sy：需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 Y 坐標。
- sWidth：需要繪制到目標上下文中的，源圖像的矩形選擇框的寬度。如果不說明，整個矩形從坐標的sx和sy開始，到圖像的右下角結束。
- sHeight：需要繪制到目標上下文中的，源圖像的矩形選擇框的高度。
要繪制圖像，我們首先要獲得圖像：
**第一種：直接獲取**
```
<img src="xxjpg" id="myimg"/>
<script>
var img=document.getElementById("myimg");
</script>
```
**第二種：動態創建**
```
<script>
var img=new Image();
img.src="xx.jpg";
img.onload = function(){
// 等待圖片加載完畢后再執行繪制
}
</script>
```
獲得了源圖對象，我們就可以使用 `drawImage()` 方法將它渲染到 canvas 里。
`drawImage()` 方法有三種形態：
**(1) 繪制圖片默認大小**
```
drawImage(image, x, y)
```
image 是 image 或者 canvas 對象或video對象，x 和 y 是其在目標 canvas 里的起始坐標。
實例：canvas-demo/drawImage1.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,10,10);
};
ctx.stroke();
</script>
```
會將圖片完整的繪制在畫布上。
**(2) 繪制并設置大小**
```
drawImage(image, x, y, width, height)
```
前面三個參數和第一種使用方式的參數含義一樣，不過，這個方法多了2個參數：width 和 height，這兩個參數用來控制 當圖像畫入時繪制的大小。
實例：canvas-demo/drawImage2.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,10,10,100,100);
};
ctx.stroke();
</script>
```
**(3) 切片**
```
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
```
第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數中，前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標在canvas上顯示的位置和大小。
實例：canvas-demo/drawImage3.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,120,40,80,80,10,10,80,80);
};
ctx.stroke();
</script>
```
**視頻截圖**
除了將圖像、canvas繪制到canvas上外，drawImage()方法的第一個參數還可以是video對象，這也是我們可以實現播放視頻的關鍵。
實例：canvas-demo/video.html：
```
<video id="video" width="320" height="240" controls>
<source src="images/movie.mp4" type="video/mp4">
</video>
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var video = document.getElementById('video');
var times = video.duration;
var t = 0;
var timeId = setInterval(function() {
if (t > times) {
clearInterval(timeId);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0);
t += 100;
}
}, 100)
</script>
```
注意：出于安全考慮，HTML5 Canvas 規范不允許我們保存和修改其他域中的圖像。
