首页 > 代码库 > HTML5中的<canvas>画布:使用canvas元素在网页上绘制四分之一圆(3)
HTML5中的<canvas>画布:使用canvas元素在网页上绘制四分之一圆(3)
前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了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>
效果如图:
说明如图所示:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。