Question

我有两张图片，首先是大图像，然后放在另一张图像上。现在我想在第一个图像上切出第二个图像的区域。

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var first_img = new Image(),
      second_img = new Image();



   first_img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
   second_img.src = 'http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png';

      var draw = function(){


          second_img.onload = function() {
            context.drawImage(second_img, 50, 50);
          };

          first_img.onload = function() {
            context.drawImage(first_img, 50, 50);
          };


      };

      draw();

Here is the fiddle.

修改第二个图像是png并且具有不规则形状，我想要第一个图像具有第一个图像的区域透明度

Answer 1

drawImage函数为

提供参数

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawImage()

在Image Canvas HTML5中剪切出一个图像区域

1 个答案: