1201272-1-ref.html (672B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <script> 6 function draw() { 7 var ctx = document.getElementById('c').getContext('2d'); 8 9 ctx.beginPath(); 10 ctx.arc(75, 75, 74, 0, 2 * Math.PI); 11 ctx.closePath(); 12 ctx.fill(); 13 14 ctx.globalCompositeOperation = 'destination-out'; 15 ctx.beginPath(); 16 ctx.arc(75, 75, 40, 0, 2 * Math.PI); 17 ctx.closePath(); 18 ctx.fill(); 19 20 ctx.globalCompositeOperation = 'source-over'; 21 ctx.lineWidth = 10; 22 ctx.strokeStyle = 'green'; 23 ctx.beginPath(); 24 ctx.arc(75, 75, 40, 0, 2 * Math.PI); 25 ctx.closePath(); 26 ctx.stroke(); 27 } 28 </script> 29 </head> 30 <body onload='draw()' style='background: white;'> 31 <canvas id='c' width='200' height='200'></canvas> 32 </body> 33 </html>