Canvas 如何画一个四分之一圆

张驰Terry

于 2021-01-14 09:07:55 发布

阅读量3.6k

点赞数 6

分类专栏：软件研发文章标签： canvas html css html5 js

本文链接：https://blog.csdn.net/terrychinaz/article/details/112599395

版权

软件研发专栏收录该内容

663 篇文章 26 订阅

订阅专栏

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();

https://jsfiddle.net/jhyp83u4/