<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #buttons{width: 1200px;margin: 10px auto;clear:both;} #buttons a{font-size: 18px;display: block;float:left;margin-right: 14px;} </style> <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> <div id="buttons"> <a href="">source-over</a> <a href="">source-atop</a> <a href="">source-in</a> <a href="">source-out</a> <a href="">destination-over</a> <a href="">destination-atop</a> <a href="">destination-in</a> <a href="">destination-out</a> <a href="">lighter</a> <a href="">copy</a> <a href="">xor</a> </div> <script> window.onload = function(){ draw("source-over"); var buttons = document.getElementById("buttons").getElementsByTagName("a"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick = function(){ draw(this.text); return false; } } } function draw(compositeStyle){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); // draw title context.font = "bold 40 Arial"; context.textAlign = "center"; context.textBaseline = "#058"; context.fillStyle = "#058"; context.fillText("globalCompositeOperation =" + compositeStyle,canvas.width/2,60); // draw a rect context.fillStyle = "blue"; context.fillRect(300,150,500,500); // draw a triangle context.globalCompositeOperation = compositeStyle; context.fillStyle = "red"; context.beginPath(); context.moveTo(700,250); context.lineTo(1000,750); context.lineTo(400,750); 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>