conic-gradient-rotation.html (799B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Conic gradient</title> 5 <link rel="match" href="conic-gradient-rotation-expected.html"/> 6 </head> 7 <body> 8 <canvas id="c"></canvas> 9 <script type="text/javascript"> 10 const canvas = document.getElementById('c'); 11 const ctx = canvas.getContext('2d'); 12 13 const grad = ctx.createConicGradient(2.5*Math.PI, 100, 50); 14 15 grad.addColorStop(0, "red"); 16 grad.addColorStop(0.2, "red"); 17 grad.addColorStop(0.2, "orange"); 18 grad.addColorStop(0.4, "orange"); 19 grad.addColorStop(0.4, "yellow"); 20 grad.addColorStop(0.6, "yellow"); 21 grad.addColorStop(0.6, "green"); 22 grad.addColorStop(0.8, "green"); 23 grad.addColorStop(0.8, "blue"); 24 25 ctx.fillStyle = grad; 26 ctx.fillRect(0, 0, canvas.width, canvas.height); 27 </script> 28 29 </body> 30 </html>