HTML5画布覆盖 [英] Html5 Canvas overlay

查看:192
本文介绍了HTML5画布覆盖的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有一个好的解决方案来绘制一个位图用帆布覆盖的颜色?

Is there a good solution to draw a bitmap with an overlay color with canvas ?

什么我希望做的是绘制一个位图具有独特的颜色都不透明像素。
我没有找到任何解决方案,它可以为我是有用!

What I'm looking to do is drawing a bitmap with a unique color for all not transparent pixel. I do not find any solution for that, and it could be usefull for me !

感谢的

推荐答案

现场演示

Live Demo

做到这一点的方法之一是遍历每个像素,并更改R / G / B值,您想要的值。通过跳过alpha值只会改变不透明像素到你想要的颜色。

One way to do it is to loop through each pixel and change the r/g/b values to the value you want it. By skipping over the alpha value it will only change the opaque pixels to the color you want.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Green component
      pix[i+2] = uniqueColor[2]; // Blue component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);

// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png"); 

这篇关于HTML5画布覆盖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆