## 图像与视频 基础语法: ``` 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 规范不允许我们保存和修改其他域中的图像。