使用标签: canvas元素在网页上绘制四分之一圆(3)’使用HTML5标签: canvas元素在网页上绘制四分之一圆(3)

顺晟科技

2022-09-15 21:51:21

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下:

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title></title>
 6 
 7 </head>
 8 <body>
 9     <canvas id="canvas" width="150" height="150"></canvas>
10     <script type="text/javascript">
11         var canvas = document.getElementById("canvas");
12             function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){
13                 var centerPoint = {x:75,y:75};
14                 start_angle = start_angle || 0;
15                 if (canvas_tag.getContext){
16                 //开始绘制路径
17                 ctx = canvas_tag.getContext("2d");
18                     ctx.beginPath();
19                 //画出弧线
20                     ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);
21                 //画出结束半径
22                     ctx.lineTo(centerPoint.x,centerPoint.y);
23                     ctx.fillStyle="#FF0000";
24                //如果需要填充就填充，不需要就算了
25                     if (fill) {
26                         ctx.fill();
27                     }else{
28                         ctx.closePath();
29                         ctx.stroke();
30                     }
31                 } else {
32                        alert(\'你需要使用火狐浏览器和苹果浏览器最新版查看!\');
33                        }
34             }
35             //画一个起始角度为180度，结束角度为270度，绘图方向顺时针的填充扇形
36             DrawSector(canvas,Math.PI*1/2,Math.PI,50,true,false);        
37     </script> 
38 </body>
39 </html>

效果如图:

说明如图所示:

上一篇：工厂模式工厂方法模式工厂方法模式摘要下一篇：前端开发[第1部分:HTML]

网站建设

Html

使用标签: canvas元素在网页上绘制四分之一圆(3)’使用HTML5标签: canvas元素在网页上绘制四分之一圆(3)