672646-alpha-radial-gradient.html (596B)
1 <!doctype html> 2 <head> 3 <style> 4 body { 5 background-color: blue; 6 } 7 </style> 8 9 <body> 10 <canvas id="mycanvas" width="200" height="200"></canvas> 11 12 <script type="text/javascript"> 13 var cx = document.getElementById('mycanvas').getContext('2d'); 14 var g = cx.createRadialGradient(100, 100, 50, 100, 100, 75); 15 g.addColorStop(0, 'rgba(100%, 100%, 0%, 0.5)'); 16 g.addColorStop(1, 'rgba(100%, 100%, 0%, 0)'); 17 cx.fillStyle = g; 18 cx.fillRect(0, 0, 200, 200); 19 cx.beginPath(); 20 cx.arc(100, 100, 80, 0, Math.PI*2, true); 21 cx.closePath(); 22 cx.fillStyle = "white"; 23 cx.fill(); 24 </script>