8-15 globalCompositeOperation阶段练习二
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-15 课堂演示</title> 6 </head> 7 <style type="text/css"> 8 input{ 9 background: orange; 10 width: 100px; 11 height: 100px; 12 border-radius: 100px; 13 position: absolute; 14 left: 825px; 15 top: 200px; 16 } 17 </style> 18 <body> 19 <canvas id="canvas" width="800" height="500" style="background: #A9A9A9"> 20 很抱歉，您的浏览器暂不支持HTML5的canvas 21 </canvas> 22 <input type="button" onclick="gco()" value="合成"> 23 <select id="hc" size="11"> 24 <option value="source-over" selected="selected">source-over</option> 25 <option value="source-atop">source-atop</option> 26 <option value="source-in">source-in</option> 27 <option value="source-out">source-out</option> 28 <option value="destination-atop">destination-atop</option> 29 <option value="destination-in">destination-in</option> 30 <option value="destination-out">destination-out</option> 31 <option value="destination-over">destination-over</option> 32 <option value="lighter">lighter</option> 33 <option value="copy">copy</option> 34 <option value="xor">xor</option> 35 </select> 36 37 <script> 38 var c=document.getElementById("canvas"); 39 var ctx=c.getContext("2d"); 40 var selectElement=document.getElementById('hc') 41 function gco(){ 42 //alert(selectElement.value) 43 ctx.clearRect(0,0,c.width,c.height) 44 ctx.save() 45 ctx.fillStyle="red"; 46 ctx.fillRect(400,200,150,150); 47 ctx.globalCompositeOperation=selectElement.value; 48 ctx.beginPath(); 49 ctx.fillStyle="blue"; 50 ctx.arc(400,200,100,0,2*Math.PI); 51 ctx.fill(); 52 ctx.restore() 53 54 } 55 56 57 58 59 60 61 </script> 62 </body> 63 </html>