0
我想爲圖像添加色調顏色。 excanvas不支持getImageData。我找到了一種用透明顏色圖色調圖像的方法，但它不適用於ie。我的代碼如下。你也可以檢查http://jsfiddle.net/salt/Qxu56/畫布fillStyle不能在Internet Explorer上工作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML5 Canvas Test</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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
if (typeof window.G_vmlCanvasManager!="undefined") {
drawingCanvas=window.G_vmlCanvasManager.initElement(drawingCanvas);
var x = drawingCanvas.getContext('2d');
}else{
var x = drawingCanvas.getContext('2d');
};
// 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);
}
}
};
// create offscreen buffer,
buffer = document.createElement('canvas');
if (typeof window.G_vmlCanvasManager!="undefined") {
G_vmlCanvasManager.initElement(buffer);
var bx = buffer.getContext('2d');
}else{
var bx = buffer.getContext('2d');
};
fg = new Image();
fg.onload = function() {
buffer.width = this.width;
buffer.height = this.height;
// fill offscreen buffer with the tint color
bx.fillStyle = '#FFCC00'
bx.fillRect(0,0,this.width,this.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);
};
fg.src = 'http://upload.wikimedia.org/wikipedia/commons/0/00/WX_circle_white.png';
};
};
</script>
</head>
<body>
<canvas id="myDrawing" width="770" height="400">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>