paint2d-conicGradient-ref.html (426B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id="output" width="100" height="100"></canvas> 5 <script> 6 var canvas = document.getElementById('output'); 7 var ctx = canvas.getContext('2d'); 8 9 const g = ctx.createConicGradient(3*Math.PI/2, 30, 30); 10 g.addColorStop(0, "#f0f"); 11 g.addColorStop(0.25, "#0ff"); 12 g.addColorStop(0.50, "#ff0"); 13 g.addColorStop(0.75, "#f0f"); 14 ctx.fillStyle = g; 15 ctx.fillRect(0, 0, 100, 100); 16 </script> 17 </body> 18 </html>