| <style> |
| canvas { |
| border: 1px solid; |
| } |
| </style> |
| <body> |
| <canvas id="c1" width="100" height="100"></canvas> |
| <canvas id="c2" width="100" height="100"></canvas> |
| <canvas id="c3" width="100" height="100"></canvas> |
| <canvas id="c4" width="100" height="100"></canvas> |
| <script> |
| function fillCanvasWithConicGradient(canvasId, angle, x, y) { |
| const canvas = document.getElementById(canvasId); |
| const ctx = canvas.getContext('2d'); |
| const gradient = ctx.createConicGradient(angle, x, y); |
| |
| gradient.addColorStop(0, "black"); |
| gradient.addColorStop(0.25, "black"); |
| gradient.addColorStop(0.25, "transparent"); |
| gradient.addColorStop(0.5, "transparent"); |
| gradient.addColorStop(0.5, "black"); |
| gradient.addColorStop(0.75, "black"); |
| gradient.addColorStop(0.75, "transparent"); |
| |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, 100, 100); |
| } |
| |
| fillCanvasWithConicGradient("c1", 0, 50, 50); |
| fillCanvasWithConicGradient("c2", Math.PI / 2, 50, 50); |
| fillCanvasWithConicGradient("c3", Math.PI, 50, 50); |
| fillCanvasWithConicGradient("c4", Math.PI * 3 / 2, 50, 50); |
| </script> |
| </body> |
