canvas-7globleCompositeOperation.html

2024-04-27 15:02:42

字体：大中小

来源：转载

供稿：网友

<!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('当前游览器不支持Canvas，请更换游览器后再试！');            }        }    </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>