Canvas中如何绘制弧形和圆形

最新推荐文章于 2020-12-20 19:17:37 发布

转载最新推荐文章于 2020-12-20 19:17:37 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guopei/archive/2011/06/30/2093981.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML5 Canvas API来绘制弧形和圆形。包括arc函数的具体参数说明及其使用方法，并通过实例代码展示了如何绘制一个小脸图案。此外还提供了常用角度与弧度之间的转换表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Canvas中绘制弧形和圆形的计算方法：

arc(x,y,radius,startAngle, endAngle,bAntiClockwise)

x,y：是arc的中心点

radius：是半径长度

startAngle：是以starAngle开始（弧度）

endAngle：是以endAngle结束（弧度）

bAntiClockwise：是否是逆时针，设置为true意味着弧形的绘制是逆时针方向的，设置为false意味着顺时针进行

特殊角度数和弧度数对应表

度	0°	30°	45°	60°	90°	120°	135°	150°	180°	270°	360°
弧度	0	π/6	π/4	π/3	π/2	2π/3	3π/4	5π/6	π	3π/2	2π

1 <! DOCTYPE HTML >
2 < html >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " / >
5 < title > 绘制一个小脸 < / title>
6 < meta http - equiv = " Pragma " content = " no-cache " / >
7 < meta http - equiv = " Cache-Control " content = " no-cache " / >
8 < meta http - equiv = " Expires " content = " 0 " / >
9 < meta http - equiv = " ImageToolbar " content = " no " / >
10 < script type = " text/javascript " >
11 function drawRadian(){
12 var context = document.getElementById( ' canvas ' ).getContext( ' 2d ' );
13 context.beginPath();
14 context.strokeStyle = " rgb(0,0,0) " ;
15 context.arc( 100 , 100 , 100 , 0 , 2 * Math.PI, true );
16 context.closePath();
17 context.fillStyle = ' rgb(200,0,200) ' ;
18 context.fill();
19
20 context.beginPath();
21 context.arc( 50 , 75 , 25 , 0 , 2 * Math.PI, true );
22 context.fillStyle = ' rgb(0,0,0) ' ;
23 context.fill();
24
25 context.beginPath();
26 context.arc( 150 , 75 , 25 , 0 , 2 * Math.PI, true );
27 context.fillStyle = ' rgb(0,0,0) ' ;
28 context.fill();
29
30 context.beginPath();
31 context.arc( 150 , 75 , 25 , 0 , 2 * Math.PI, true );
32 context.fillStyle = ' rgb(0,0,0) ' ;
33 context.fill();
34
35 context.beginPath();
36 context.arc( 100 , 125 , 10 , 0 , 2 * Math.PI, true );
37 context.fillStyle = ' rgb(0,0,0) ' ;
38 context.fill();
39
40 context.beginPath();
41 context.strokeStyle = " rgb(0,0,0) " ;
42 context.lineWidth = 5 ;
43 context.arc( 100 , 150 , 25 ,Math.PI / 6,5*Math.PI / 6 , false );
44
45 context.stroke();
46
47 }
48 < / script>
49 < / head>
50 < body onload = " drawRadian() " >
51 < canvas id = " canvas " width = ' 400 ' height = " 300 " >
52 your browser doesn ' t support the HTMl5 elemnt canvas.
53 </canvas>
54 </body>
55 </html>

最终效果：