canvas学习之图像的擦除

复习

上一节中，我们学习了如何在canvas中切出一个图来，掌握这个技能后，也许有一天你就不需要设计来帮你切图来，你自己就可以在前端搞定切图了。我们用来切图的方法和之前我们学习使用图片的方法一样，叫drawImage(),不过需要传入9个参数。如下drawImage(img,x,y,w,h,x2,y2,w2,h2)，这9个参数分别是img，要进行剪切的原始图片，x，y是源图片左上角的坐标。w，h是源图片放到canvas中时的大小，我们可以根据自己的需要进行设置，但是最终这个源图是不显示出来的。x2，y2是切割出来后的图片放置位置，也就是这张图的左上角坐标，w2，h2是切割好的图的宽度和高度。

学习

截止这节之前，我们一直都在都在学习如何把图像绘制到canvas上去，这一节我们学习一下，如何将绘制好的图像擦掉。

  • clearRect(x,y,width,height)用来清除掉已经绘画好的内容，让清除的区域变得透明。这里面有四个参数，其中x是被清除区域的左上角的x坐标，y是被清除区域y坐标。width是被清除区域的宽度，height是被清除区域的高度。

    下面，进入示例环节。

    首先，我们画一个粉红色的矩形出来。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <canvas width="400" height="400" id="mycanvas"></canvas>
    <script>
      const canvas = document.getElementById('mycanvas')
      if (canvas.getContext()) {
         const ctx = canvas.getContext('2d')
         ctx.beginPath()
         ctx.fillStyle = '#e74478'
         ctx.fillRect(100,100,100, 100)
         ctx.closePath()
      }
    </script>

    确认我们确实画了一个粉红色的矩形后，我们分别擦掉它的四个角，擦掉一个20*20的正方形。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <canvas width="400" height="400" id="mycanvas"></canvas>
    <script>
      const canvas = document.getElementById('mycanvas')
      if (canvas.getContext()) {
         const ctx = canvas.getContext('2d')
         ctx.beginPath()
         ctx.fillStyle = '#e74478'
         ctx.fillRect(100,100,100, 100)
         ctx.closePath()
         // 擦掉左上角
         ctx.clearRect(100,100,20,20)
         // 擦掉右上角
         ctx.clearRect(180, 100, 20,20)
          // 擦掉左下角
        ctx.clearRect(100, 180, 20, 20)
        // 擦掉右下角
        ctx.clearRect(180,180, 20, 20)
      }
    </script>

    以后遇到某个图形需要擦除的时候，我们就可以使用这个clearRect了，不用再重新开始，从头再画。下一节我们学习绘画状态的恢复与保存。