canvas-7globleCompositeOperation.html

2024-04-27 15:02:42

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">        The current browser does not support Canvas, can replace the browser a try!    </canvas>    <script>        window.onload = function(){            var canvas = document.getElementById('canvas');            canvas.width = 1024;            canvas.height = 768;            if(canvas.getContext('2d')){                var context = canvas.getContext('2d');                context.fillStyle = "blue";                context.fillRect(100,200,400,400);                context.globalCompositeOperation = "sourse-over";                context.fillStyle = "red";                context.beginPath();                    context.moveTo(400,300);                    context.lineTo(650,700);                    context.lineTo(150,700);                context.closePath();                context.fill();            }else{                alert('當(dāng)前游覽器不支持Canvas，請(qǐng)更換游覽器后再試！');            }        }    </script></body><script>    /*global        globalAlpha        globalCompositeOperation  = "source-over"(default)                                    sourse-atop                                    sourse-in                                    sourse-out                                    destination-over  //前面繪制的覆蓋了后面繪制的圖形                                    destination-atop                                    destination-in                                    destination-out                                    lighter                                    copy                                    xor                    */</script></html>