HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="ctx" width="300" height="300" style="border:1px solid #d3d3d3;"> </canvas </body> </html>
JS:
var c = document.getElementById('ctx') var ctx = c.getContext('2d'); var x = 100; var y = 50; var RADIUS = 80; ctx.beginPath(); ctx.arc(x, y, RADIUS, Math.PI / 2, Math.PI); //sAngle 90 ,eAngle 180 ctx.fillStyle = '#333'; ctx.lineTo(x, y); ctx.fill(); ctx.restore(); ctx.stroke();