canvas API ，通俗的canvas基础知识（五）

前几期讲的都是路径图形的绘图，这节我们要讲的是如何在画布上操作图片，因为图形画不了漂亮妹子（画图高手忽略不计），想画美女怎么办？跟我来:

想要在画布中插入一张图片，我们需要的方法是这位大侠：
drawImage() 在画布上绘制图像，画布或视频
这位大侠可谓是武功高强啊，其绝学之多，内力之深，堪称高手中的高手，那我们来看看它都有些什么绝学：
秘籍一：
drawImage(img,x,y) 在画布上定位一张图片
参数：img 表示引入的图片对象，x,y表示引入的坐标
ps:img在这里表示的是图片的对象而不是图片的路径，说明不能直接来引用图片，而是需要操作DOM的方式来引用
上面的提示说了图片的特殊性，那我们该如何来获取图片呢？我们先来一个最简单的：

<canvas width="500" height="400" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
</canvas>
<img src="2.jpg" alt="" id="img">

我们在页面上放一张图（当年的奶茶妹，当年的哦），然后获取这张图，再放到画布上

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,10,10);

看，在画布外的奶茶妹就到我们的画布上去了，可惜的是，现在的奶茶妹已经不是当前的奶茶妹了，有同学会说，我只想让我的奶茶妹在我的画布上（怎么是我的奶茶妹），不想让她在别的地方被看见，我要怎么做呢？机灵的同学一定想得到，我把外面的图片隐藏起来不就行了吗？直接隐藏行不行呢？

<img src="2.jpg" alt="" id="img" style="display:none;">

右边的奶茶妹不见了，只有我的画布上有可以的奶茶妹，恩恩，这是我想要的，说明这样有这个图片在页面上，能够获取到这个DOM元素即可，至于图片到底显不显示，不重要，那图片的隐藏方式就很多了，自身隐藏，放到一个p中p隐藏，放到canvas标签中（因为支持canvas的浏览器里面的东西是不显示的）等等，也可以用纯js的方式来添加图片：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var aImg = new Image();
aImg.src = '2.jpg';
ctx.onload = function(){
    ctx.drawImage(aImg,10,10,400,300);
}

秘籍二：

drawImage(img,x,y,w,h) 在画布上定位图片，并规定图片的宽高

参数：img 表示引入的图片对象，x,y表示引入的坐标 ，w,h表示规定图片的大小

有同学会说，奶茶妹是好，但是我的画布太小，奶茶妹太大（哪里大了），图片太大，都基本上把我的画布都占满了，如果我在画布上画别的图形，岂不是玷污了奶茶妹了，能把她变小吗？哈哈，drawImage具备孙悟空的变换本领，能大能小，不信，看这里：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,10,10,200,150);

看，上面的奶茶妹一下子就变小了，哎呀，太小了，看不清楚，而且我只想看奶茶妹，不想看到别的糟同学，可以吗？当然可以

秘籍三
drawImage(img,sX,sY,sWidth,sHeight,x,y,width,height) 剪切画布，并在画布上定位被剪切的部分
参数：img 表示引入的图片对象，sX,sY表示剪切的其实坐标，sWidth,sHeight表示剪切的宽度和高度，x,y表示在画布上放置图片的坐标 ，width,height表示需要使用的图片的宽高
上面的参数虽多，但是还是很好理解的，我们来看看如何将奶茶妹剪切下来：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,150,0,150,300,10,10,400,300);

纳里，奶茶妹怎么变成了胖子？再看一下参数，发现此时最后面的width和height已和前面的w,h代表的意思不一样了，现在的表示裁剪下来的图片需要显示多大，如果比裁剪的宽高大，则会被拉伸，比裁剪的宽高小，则会被缩小，恩，我们调成跟裁剪尺寸一样看一下：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oImg = document.getElementById("img");
ctx.drawImage(oImg,150,0,150,300,10,10,150,300);

对对，就是这样的，后面的x，y表示裁剪的图片显示的位置，我们调到中间看看

ctx.drawImage(oImg,150,0,150,300,150,10,150,300);

所以在使用裁剪功能的时候，要特别注意，图片的坐标和宽高和原来的意思有区别了

秘籍四

drawImage(video,x,y,w,h) 在画布上定位视频，并规定视频的宽高

参数：video表示引入是视频对象 ，x,y表示视频引入的坐标 ，w,h表示规定视频的大小

其实这里跟引入图片是一样的，只不过它是可以引入视频的，但是这里的引入只是视频的某一帧，所以，当我们直接引入时，是没有什么反应的：

<canvas width="500" height="400" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
    </canvas>
    <video id="video1" controls width="270">
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
    </video>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oVideo = document.getElementById("video1");
ctx.drawImage(oVideo,10,10,270,135);

当视频设置为autoplay时：



可以看到，右侧视频在播放，左侧没有什么反应，那怎么来播放视频呢？我们可以加一个定时器，然后每隔20秒执行一次绘画，这样一帧一帧的执行，连续起来就是一个视频了，其实视频的原理也是如此：

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var oImg = document.getElementById("img");
        var oVideo = document.getElementById("video1");
        var timer = setInterval(function(){
            ctx.drawImage(oVideo,10,10,270,135);
        },20)

不想让画布外的视频显示的方法跟图片是一样的，这里我就不细说了

除了drawImage具有裁剪功能外，还有一个方法可以裁剪——clip()，不同的是drawImage是裁剪图片，而clip只能裁剪图形，我们具体来看一下clip吧：

clip() 从原始画布中剪切任意形状和尺寸

ps:一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

提示这里很重要，一定要看清楚，就好比是一张很大的油画布，现在我们用一个木框架子框一部分，然后就只能在这个框里画画了，框外面的就不能来画，恩，就是这个意思，当我们用restore()方法恢复画布是时候，就好比是把木框架子取掉了，这样就可以在别的地方画了，当然画好的这部分就不要动了
举个栗子：
不用clip裁剪：

ctx.arc(200, 200, 80, (