HTML5如何在画布中绘制透明像素图像

前端之家收集整理的这篇文章主要介绍了HTML5如何在画布中绘制透明像素图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用rgb像素数据绘制图像.我需要为该图像设置透明背景颜色.我可以将alpha设置为透明图像的值是多少?或者还有其他解决方案吗?

解决方法

如果我理解你需要什么,你基本上想要将图像上的特定颜色变为透明.要做到这一点,你需要使用get ImageData检查 mdn for an explanation on pixel manipulation.

下面是一些示例代码

var imgd = ctx.getImageData(0,imageWidth,imageHeight),pix = imgd.data;

for (var i = 0,n = pix.length; i <n; i += 4) {
    var r = pix[i],g = pix[i+1],b = pix[i+2];

    if(g > 150){ 
        // If the green component value is higher than 150
        // make the pixel transparent because i+3 is the alpha component
        // values 0-255 work,255 is solid
        pix[i + 3] = 0;
    }
}

ctx.putImageData(imgd,0);​

And a working demo

使用上面的代码,您可以使用检查fuschia

if(r == 255&& g == 0&& b == 255)

猜你在找的HTML5相关文章