canvas学习之在canvas中操作图片

复习

上一节中，我们学习了如何在canvas中绘制文字，分别是使用fillText(text, x, y)和strokeText(text,x,y)接口。对绘制的文字进行阳色的的设置，颜色可以使用fillStyle=color或者fillStroke = color属性，字体大小和指定字体可以使用font=“字体大小 具体字体”属性，对齐方式可以使用textAlign=“对齐方式”,字体方向使用direction属性。

学习

现在开始，我们开始学习将图片绘制在canvas上。

将图片在canvas中使用，我们在前面绘制形状会线条的时候也学习过。当时我们是将图片作为颜料即fillStyle或者strokeStyle的属性值来使用，在这个过程中，我们虽然也能够使用图片，但对图片的可操作空间有限。

今天，我们要学的新方法对图片操作空间更大，完全不同于之前学过的。

  • 获得图片源

    在绘制开始之前，我们需要获取到图片。这个图片可以是网页内的某一张图片，直接使用document.getElementById等dom操作办法获取。也可以是一个其它地方的图片，只需要我们创建一个新的image对象即可， 另外，它还可以是另一个canvas，获取方法同获取相同页面内的另一个图片，甚至可以使用视频中的某一帧来绘制，这个我们用单独的一节课来学习。例如：

    • 获取dom内的图像

      1
      2
      3
      4
      5
      6
      7
      <img src="http://image.iget100.com/%E5%B9%B4%E5%BA%A6%E6%8E%A8%E8%8D%90%E8%AE%BE%E8%AE%A1%E4%B9%A6%E5%8D%95%EF%BC%8C%E6%82%A8%E6%94%B6%E8%97%8F%E4%BA%86%E5%90%97%EF%BC%9F4" id="myimg">
      <canvas width="500" height="500" id="mycanvas"></canvas>

      <script>
       const img = document.getElementById('myimg')
      </script>

    • 获取网络上的图像

      1
      2
      3
      4
      <script> 
       const img = new Image()
       img.src = "http://image.iget100.com/%E5%B9%B4%E5%BA%A6%E6%8E%A8%E8%8D%90%E8%AE%BE%E8%AE%A1%E4%B9%A6%E5%8D%95%EF%BC%8C%E6%82%A8%E6%94%B6%E8%97%8F%E4%BA%86%E5%90%97%EF%BC%9F4" 
      </script>

  • 将图片绘制到canvas中去

    • 将图片绘制到canvas中去的方法是drawImage(image, x,y)。image是指前面我们已经获取到的图片。x，y是指图片左上角的地方。

    • 在上面的方法中，我们无法控制绘制出来的图片大小，只能控制图片的起点，这个时候，原图有多大，就会绘制多大的图。但是有一个问题是咱们的canvas大小是确定的，所以，图片就会溢出，而溢出的那一部分，就消失在空气中了。为了能够将图片完全显示出来，我们可能需要对图片进行缩放。这个时候，我们在drawImage(image, x,y)的基础上再添加两个参数，width和height，形式如下：drawImage(image, x,y,width,height)。通过设置width和height，我们可以按照自己的想法对图片进行缩放。

    • 除了上面的两种形式外，drawImage还有一个强大的切图功能，因比较复杂，打算单独放一节学习。
## 示例

接下来，对如何将图片绘制到canvas中进行示例。这里仅示范从网络上获取图片后示范的例子,从视频上获取图片和剪切图片我们用单独的两节课来学习。其它的自己练习。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<canvas width="200" height="200" id="mycanvas"></canvas>
<style>
canvas{
  border:solid red 1px;
}
</style>
<script>
    const img = new Image()
    img.src ="http://image.iget100.com/%E5%B9%B4%E5%BA%A6%E6%8E%A8%E8%8D%90%E8%AE%BE%E8%AE%A1%E4%B9%A6%E5%8D%95%EF%BC%8C%E6%82%A8%E6%94%B6%E8%97%8F%E4%BA%86%E5%90%97%EF%BC%9F4"
    img.onload = function () {
      const imgWidth = img.width
      const imgHeight = img.height
      const canvas = document.getElementById('mycanvas')
      if (canvas.getContext) {
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0,0, imgWidth / 3,  imgHeight / 3)
      }
    }
</script>




<iframe height="265" style="width: 100%;" scrolling="no" title="learn canvas drawImage" src="https://codepen.io/zhangxiaochunxy/embed/WNvXgyr?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/zhangxiaochunxy/pen/WNvXgyr'>learn canvas drawImage</a> by 张小春Nathan
  (<a href='https://codepen.io/zhangxiaochunxy'>@zhangxiaochunxy</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>