我想写个简单的图片切换效果,用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>