HTML5 canvas實現圓型圖表
阿新 • • 發佈:2019-02-10
使用canvas製作三個圓弧拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: black; } canvas{ background: #fff; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var ctx = document.getElementById("canvas") var oC = ctx.getContext("2d") oC.beginPath() oC.moveTo(100,100) oC.arc(100,100,60,-90*Math.PI/180,45*Math.PI/180); oC.closePath() oC.stroke() oC.fillStyle = "red" oC.fill() oC.beginPath() oC.moveTo(100,100) oC.arc(100,100,60,45*Math.PI/180,160*Math.PI/180); oC.closePath() oC.stroke() oC.fillStyle = "green" oC.fill() oC.beginPath() oC.moveTo(100,100) oC.arc(100,100,60,160*Math.PI/180,-90*Math.PI/180); oC.closePath() oC.stroke() oC.fillStyle = "blue" oC.fill() </script> </body> </html>