我试着在谷歌上搜索答案,但我从来没有找到一个简单的答案,或者为什么这个答案有效。所以我想知道,用来改变画布上图像颜色的代码是什么?例如,假设我想把东西换成#ff0000
。如果一个像素是#000000
,它应该保持这种状态。如果一个像素是#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", "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);
}
markk给了你整个键来实现你想要的注释,但这里它适用于你的情况:
你说你的图像只有一种纯色,白色。
(这里我认为透明没有颜色,但在其他上下文中它是)
要改变这种颜色,您可以使用ctx.globalCompositeOperation('source-atop')
参数,它将"只在与现有画布内容重叠的地方"绘制新形状。这意味着您可以先绘制字母形状,然后在其上填充矩形,然后只绘制彩色字母形状。
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 = "https://i.stack.imgur.com/9RQXh.png";
<canvas id="canvas"></canvas>
或者你可以用另一种方式:首先画出彩色矩形,将globalCompositeOperation
设置为"destination-atop"
,然后画出你的字母。
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 = "https://i.stack.imgur.com/9RQXh.png";
<canvas id="canvas"></canvas>
现在,要在代码中实现它,您可以保存Text
对象中设置的彩色字母,并绘制它而不是原始图像:
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);
}