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

时间:2014-05-05 08:53:26

标签: javascript html5 canvas html5-canvas

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

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并且具有不规则形状,我想要第一个图像具有第一个图像的区域透明度

1 个答案:

答案 0 :(得分:0)