canvas-7globleCompositeOperation.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><canvasid="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(){varcanvas=document.getElementById('canvas');

canvas.width=1024;

canvas.height=768;if(canvas.getContext('2d')){varcontext=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>