问题描述
我试图搜索答案，但我从来没有找到一个简单的答案，或为什么答案工作。所以我想知道，什么是代码，将用来改变一个图像在画布上的颜色？例如，让我说要将事情更改为＃ff0000 。如果一个像素＃000000 ，它应该保持这样。如果像素us #ffffff ，它应该变成＃ff0000 。这里是我的文本对象构造函数：
Text = function（x，y，str，s，c）{
var img = new Image（）;
img.src =font.png;
var alphabet = [a，b，c，d，e，f，g，h，i，j，k ，l，m，n，o，p，q，r，s，t，u，v x，y，z，。，！，？]
this.text = str.toLowerCase
this.x = x;
this.y = y;
this.type =text;
this.rows = 1;
this.height = this.rows * 10;
this.width = this.text.length * 8;
this.draw = function（）{
for（var i = 0; i< this.text.length; i ++）
{
scene.ctx.drawImage ，（alphabet.indexOf（this.text [i]）％16）* 8，Library.newMath.roundZero（alphabet.indexOf（this.text [i]）/ 16）* 10,8,10，this.x + i * 8 +（scene.xOffset *！this.fixed），this.y + 0 +（scene.yOffset *！this.fixed），8，10）;
}
}
Shape.prototype.constructor.call（this，x，y）;
}
实现你想要的，但这里它适用于你的情况：
你说你的图像只包含一个纯色，白色。
要更改此颜色，您可以使用参数，它将绘制新形状仅在与现有画布内容重叠的地方。这意味着您可以先绘制字母形状，然后在其上方填充一个矩形，并且只绘制彩色字母形状。
< canvas id =canvas >< / canvas>
其他方式：首先绘制彩色矩形，设置 globalCompositeOperation 到destination-atop然后画你的信。
< canvas id =canvas>< / canvas> pre>
现在，要在代码中实现它，您可以保存 Text 对象并绘制它而不是原始图像：
Text = function y，str，s，c）{
var img = new Image（）;
//保存指向我们的对象的指针，所以我们可以在onload事件中使用它
var that = this;
//这里实现着色部分
img.onload = function（）{
that.img = document.createElement（'canvas'）;
that.img.width = this.width;
that.img.height = this.height;
var ctx = that.img.getContext（'2d'）;
//将颜色设置为所需的颜色
ctx.fillStyle = c;
ctx.fillRect（0，0，canvas.width，canvas.height）
ctx.globalCompositeOperation ='destination-atop';
ctx.drawImage（this，0，0）;
}
img.src =font.png;
var alphabet = [a，b，c，d，e，f，g，h，i，j，k ，l，m，n，o，p，q，r，s，t，u，v x，y，z，。，！，？]
this.text = str.toLowerCase
this.x = x;
this.y = y;
this.type =text;
this.rows = 1;
this.height = this.rows * 10;
this.width = this.text.length * 8;
this.draw = function（）{
for（var i = 0; i< this.text.length; i ++）
{
//这里使用canvas created
scene.ctx.drawImage（this.img，（alphabet.indexOf（this.text [i]）％16）* 8，Library.newMath.roundZero（alphabet.indexOf（this.text [i]） / 16）* 10,8,10，this.x + i * 8 +（scene.xOffset *！this.fixed），this.y + 0 +（scene.yOffset *！this.fixed），8，10） ;
}
}
Shape.prototype.constructor.call（this，x，y）;
}
I tried googling for an answer, but I never was able to find a plain answer, or why the answer works. So I would like to know, what is the code that one would use to change the color of an image on canvas? For example, lets say I want to change things to #ff0000. If a pixel is #000000, it should stay that way. If a pixel us #ffffff, it should become #ff0000. Here is my text object constructor:
Text = function(x, y, str, s, c){
var img = new Image();
img.src = "font.png";
var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", "!", "?"]
this.text = str.toLowerCase();
this.x = x;
this.y = y;
this.type = "text";
this.rows = 1;
this.height = this.rows * 10;
this.width = this.text.length * 8;
this.draw = function(){
for (var i = 0; i < this.text.length; i++)
{
scene.ctx.drawImage(img, (alphabet.indexOf(this.text[i]) % 16) * 8, Library.newMath.roundZero(alphabet.indexOf(this.text[i]) / 16) * 10, 8, 10, this.x + i * 8 + (scene.xOffset * !this.fixed), this.y + 0 + (scene.yOffset * !this.fixed), 8, 10);
}
}
Shape.prototype.constructor.call(this, x, y);
}
markE gave you the whole keys to achieve what you want in comments but here it is applied to your case :
You stated that your image consists of only one solid color, white.
To change this color, you may use the ctx.globalCompositeOperation('source-atop') parameter, which will draw the new shapes "only where it overlaps the existing canvas content." This means that you can first draw your letter shape, then fill a rectangle over it, and only the colored letter shape will be drawn.
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
ctx.fillStyle = 'red';
ctx.drawImage(this, 0, 0);
ctx.globalCompositeOperation = 'source-atop';
ctx.fillRect(0, 0, canvas.width, canvas.height)
// reset to default
ctx.globalCompositeOperation = 'source-over';
}
img.src = "http://i.stack.imgur.com/9RQXh.png";<canvas id="canvas"></canvas>Or you can do it the other way : first draw the colored rect, set the globalCompositeOperation to "destination-atop" and then draw your letter.
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(this, 0, 0);
// reset to default
ctx.globalCompositeOperation = 'source-over';
}
img.src = "http://i.stack.imgur.com/9RQXh.png";<canvas id="canvas"></canvas>Now, to implement it in your code, you can save the colored letters set in your Text object and draw it instead of the original image :
Text = function(x, y, str, s, c){
var img = new Image();
// save a pointer to our object so we can use it in the onload event
var that = this;
// here implement the coloring part
img.onload = function(){
that.img = document.createElement('canvas');
that.img.width = this.width;
that.img.height = this.height;
var ctx = that.img.getContext('2d');
// set the color to the wanted one
ctx.fillStyle = c;
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(this, 0, 0);
}
img.src = "font.png";
var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", "!", "?"]
this.text = str.toLowerCase();
this.x = x;
this.y = y;
this.type = "text";
this.rows = 1;
this.height = this.rows * 10;
this.width = this.text.length * 8;
this.draw = function(){
for (var i = 0; i < this.text.length; i++)
{
// here use the canvas we created
scene.ctx.drawImage(this.img, (alphabet.indexOf(this.text[i]) % 16) * 8, Library.newMath.roundZero(alphabet.indexOf(this.text[i]) / 16) * 10, 8, 10, this.x + i * 8 + (scene.xOffset * !this.fixed), this.y + 0 + (scene.yOffset * !this.fixed), 8, 10);
}
}
Shape.prototype.constructor.call(this, x, y);
}
这篇关于在画布上更改图像的颜色/色调的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！