如何使用getImageData()获得非矩形形状？

Question

html5 canvas标签具有与之关联的javascript getImageData()函数,其返回值是包含所包含像素的矩形.

但是,我需要从原始画布上取回一个三角形图像,而不是矩形,用我选择的点包围.

有谁知道从html5画布获得三角形图像的内容？

Answer 1

如果是出于效率的目的,则没有你不能使用得到一个非矩形形状getImageData().但是,如果你想要这个功能,那么你可以像这样剪辑(JS Lint示例):

var img1 = new Image();
img1.onload = function(){
    var w = img1.width
    var h = img1.height

    ctx.drawImage(img1,0,0);

    // Create a circular clipping path 
    ctx.translate(w / 2,  1.5 * h);       
    ctx.beginPath();
    ctx.arc(0,0,100,0,Math.PI*2,true);
    ctx.clip();
    ctx.drawImage(img1,-w / 2,-150);
}

img1.src = "foobar.jpg";

你得到的是原始版本,然后是剪辑版本.您可以在每次加载图像时执行此操作.或者,您可以通过创建第二个画布来创建图像,使用剪辑绘制到该画布.基本上这会创建一个图像的缓存版本,它仍然是一个矩形,但剪辑渲染剪辑外的所有内容都是透明的(如果你愿意,我可以提供一个例子,也 可以在这里看到).