我如何着色与HTML5画布图像？画布、图像
我的问题是，什么是着色正在使用的drawImage方法绘制的图像的最佳方式。目标使用率因为这是先进的2D粒子效果（游戏开发），其中颗粒改变颜色随着时间的推移等等。我不问如何着色整个画布，只有当前图像我是要绘制。
My question is, what is the best way to tint an image that is drawn using the drawImage method. The target useage for this is advanced 2d particle-effects (game development) where particles change colors over time etc. I am not asking how to tint the whole canvas, only the current image i am about to draw.
我已得出结论，globalAlpha参数影响所绘制的当前图像。
I have concluded that the globalAlpha parameter affects the current image that is drawn.
//works with drawImage()
canvas2d.globalAlpha = 0.5;
但我怎么着色每个图像的任意颜色值？如果有某种globalFillStyle或globalColor或那样的事情......
But how do i tint each image with an arbitrary color value ? It would be awesome if there was some kind of globalFillStyle or globalColor or that kind of thing...
编辑：
下面是我与工作应用的截图： http://twitpic.com/1j2aeg/full
Here is a screenshot of the application i am working with: http://twitpic.com/1j2aeg/full
推荐答案
您有合成操作，其中之一是目的地折桂。如果合成将图像投影到纯色与'context.globalCompositeOperation =目的地顶上'，它将具有前景图像的α，与背景图像的颜色。我用这个来使图像的全有色副本，然后画了，充分有色副本原件及顶部的透明度等于我要着色的金额。
You have compositing operations, and one of them is destination-atop. If you composite an image onto a solid color with the 'context.globalCompositeOperation = "destination-atop"', it will have the alpha of the foreground image, and the color of the background image. I used this to make a fully tinted copy of an image, and then drew that fully tinted copy on top of the original at an opacity equal to the amount that I want to tint.
下面是完整的code：
Here is the full code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML5 Canvas Test</title>
<script type="text/javascript">
var x; //drawing context
var width;
var height;
var fg;
var buffer
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas && drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
x = drawingCanvas.getContext('2d');
width = x.canvas.width;
height = x.canvas.height;
// grey box grid for transparency testing
x.fillStyle = '#666666';
x.fillRect(0,0,width,height);
x.fillStyle = '#AAAAAA';
var i,j;
for (i=0; i<100; i++){
for (j=0; j<100; j++){
if ((i+j)%2==0){
x.fillRect(20*i,20*j,20,20);
}
}
}
fg = new Image();
fg.src = 'https://m.xsw88.com/allimgs/daicuo/20230908/112.png';
// create offscreen buffer,
buffer = document.createElement('canvas');
buffer.width = fg.width;
buffer.height = fg.height;
bx = buffer.getContext('2d');
// fill offscreen buffer with the tint color
bx.fillStyle = '#FF0000'
bx.fillRect(0,0,buffer.width,buffer.height);
// destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
bx.globalCompositeOperation = "destination-atop";
bx.drawImage(fg,0,0);
// to tint the image, draw it first
x.drawImage(fg,0,0);
//then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
x.globalAlpha = 0.5;
x.drawImage(buffer,0,0);
}
}
</script>
</head>
</body>
<canvas id="myDrawing" width="770" height="400">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
