在画布上改变图像的颜色/色调的最好方法是什么?
What is the best way to change the color/hue of an image on canvas?
我试着在谷歌上搜索答案,但我从来没有找到一个简单的答案,或者为什么这个答案有效。所以我想知道,用来改变画布上图像颜色的代码是什么?例如,假设我想把东西换成#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);
}
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- toBoolean方法类似于toString
- 如何在单击复选框后调用控制器方法
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 递归使用 eval() 是检查程序执行的好方法吗?
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- toLocaleDateString和toLocaleString方法不尊重机器时区
- 有条件更新d3.js力图中节点的最佳方法
- TypeError:在不兼容的接收器nodejs上调用了方法Uint8Array.length
- 在画布上改变图像的颜色/色调的最好方法是什么?