html5 canvas元素扇形的繪製
阿新 • • 發佈：2019-02-04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<h5>Canvas</h5>
<canvas id="mycanvas" width="1000" height="1000">
您的瀏覽器不支援html5dcanvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定義變數獲取畫布dom
var c=mycanvas.getContext('2d');//設定繪圖環境2d
c.lineWidth=4;//設定線寬
c.strokeStyle="#A52A2A";//設定邊顏色
c.fillStyle="green";
//扇形
c.moveTo(360,450);
c.arc(360,450,100,Math.PI*7/6,Math.PI*1.5,false);
c.moveTo(360,450);
c.arc(360,450,100,Math.PI*11/6,Math.PI*1.5,true);
c.fill()
c.beginPath();
c.lineWidth=3;
c.strokeStyle="#b8edc9";
c.fillStyle="#b8edc9";
c.moveTo(360,450);
c.arc(360,450,50,Math.PI*7/6,Math.PI*1.5,false);
c.moveTo(360,450);
c.arc(360,450,50,Math.PI*11/6,Math.PI*1.5,true);
c.fill()
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<h5>Canvas</h5>
<canvas id="mycanvas" width="1000" height="1000">
您的瀏覽器不支援html5dcanvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定義變數獲取畫布dom
var c=mycanvas.getContext('2d');//設定繪圖環境2d
c.lineWidth=4;//設定線寬
c.strokeStyle="#A52A2A";//設定邊顏色
c.fillStyle="green";
//扇形
c.moveTo(360,450);
c.arc(360,450,100,Math.PI*7/6,Math.PI*1.5,false);
c.moveTo(360,450);
c.arc(360,450,100,Math.PI*11/6,Math.PI*1.5,true);
c.fill()
c.beginPath();
c.lineWidth=3;
c.strokeStyle="#b8edc9";
c.fillStyle="#b8edc9";
c.moveTo(360,450);
c.arc(360,450,50,Math.PI*7/6,Math.PI*1.5,false);
c.moveTo(360,450);
c.arc(360,450,50,Math.PI*11/6,Math.PI*1.5,true);
c.fill()
</script>
</body>
</html>