radialGradient-basic-03-ref.html (968B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <head> 6 <title>Reference for gradient</title> 7 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 --> 8 </head> 9 <body onload="go()"> 10 <canvas width="400" height="400"></canvas> 11 <style> 12 * { margin: 0; } 13 </style> 14 <script> 15 function go() { 16 let canvas = document.querySelector('canvas'); 17 let ctx = canvas.getContext('2d'); 18 19 function createCircleWithGradient(x, y, r, fx, fy) { 20 let gradient = ctx.createRadialGradient(fx, y, 0, x, y, r); 21 gradient.addColorStop(0, 'lime'); 22 gradient.addColorStop(1, 'red'); 23 24 ctx.beginPath(); 25 ctx.arc(x, y, 50, 0, 2 * Math.PI); 26 27 ctx.fillStyle = gradient; 28 ctx.fill(); 29 } 30 31 createCircleWithGradient(100, 100, 50, 50); 32 createCircleWithGradient(100, 200, 40, 60); 33 createCircleWithGradient(200, 100, 50, 250); 34 createCircleWithGradient(200, 200, 70, 280); 35 } 36 </script> 37 </body>