我想写个简单的图片切换效果,用HTML5,结果在Firefox3.6下发现context.globalCompositeOperation = 'destination-in'失效了,但在Chrome和Safari中是正常的,在FF3.7 Preview中也不行,烦请高手看看这是不是FF的Bug。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Abe's Page</title>
<script>
var canvas, context, img;
var mask_canvas, mask_context;
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
mask_canvas = document.createElement('canvas');
mask_context = mask_canvas.getContext('2d');
img = new Image();
//此处用的网络图片,如果Chrome下不显示,请换一张图片
img.src = 'http://www.9tour.cn/Uploadfile/43b7c5a879abc8d0.jpg';
img.onload = drawImage;
}
function drawImage(){
canvas.width = img.width;
canvas.height = img.height;
mask_canvas.width = img.width;
mask_canvas.height = img.height;
context.drawImage(img, 0, 0);
mask_context.fillStyle = 'rgb(0,0,0)';
//画几个圆
var r=50;
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 4; j++) {
mask_context.beginPath()
mask_context.arc(r + 2 * r * j, r + 2 * r * i, r, 0, Math.PI * 2, false);
mask_context.closePath();
mask_context.fill();
}
} context.globalCompositeOperation = 'destination-in'
context.drawImage(mask_canvas, 0, 0);
}
</script>
</head>
<style>
#canvas {
position: absolute;
left: 200px;
top: 0px;
}
</style>
<body>
<canvas id='canvas'>
</canvas>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Abe's Page</title>
<script>
var canvas, context, img;
var mask_canvas, mask_context;
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
mask_canvas = document.createElement('canvas');
mask_context = mask_canvas.getContext('2d');
img = new Image();
//此处用的网络图片,如果Chrome下不显示,请换一张图片
img.src = 'http://www.9tour.cn/Uploadfile/43b7c5a879abc8d0.jpg';
img.onload = drawImage;
}
function drawImage(){
canvas.width = img.width;
canvas.height = img.height;
mask_canvas.width = img.width;
mask_canvas.height = img.height;
context.drawImage(img, 0, 0);
mask_context.fillStyle = 'rgb(0,0,0)';
//画几个圆
var r=50;
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 4; j++) {
mask_context.beginPath()
mask_context.arc(r + 2 * r * j, r + 2 * r * i, r, 0, Math.PI * 2, false);
mask_context.closePath();
mask_context.fill();
}
} context.globalCompositeOperation = 'destination-in'
context.drawImage(mask_canvas, 0, 0);
}
</script>
</head>
<style>
#canvas {
position: absolute;
left: 200px;
top: 0px;
}
</style>
<body>
<canvas id='canvas'>
</canvas>
</body>
</html>
居然HTML5都使用上了!!!!!
这样的效果只能自己看,部署到网上就不行了。