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

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <canvas id="canvas" width="150" height="150"></canvas>

     <script type="text/javascript">

         var canvas = document.getElementById("canvas");

             function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){

                 var centerPoint = {x:75,y:75};

                 start_angle = start_angle || 0;

                 if (canvas_tag.getContext){

                 //开始绘制路径

                 ctx = canvas_tag.getContext("2d");

                     ctx.beginPath();

                 //画出弧线

                     ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);

                 //画出结束半径

                     ctx.lineTo(centerPoint.x,centerPoint.y);

                     ctx.fillStyle="#FF0000";

                //如果需要填充就填充，不需要就算了

                     if (fill) {

                         ctx.fill();

                     }else{

                         ctx.closePath();

                         ctx.stroke();

                     }

                 } else {

                        alert('你需要使用火狐浏览器和苹果浏览器最新版查看!');

                        }

             }

             //画一个起始角度为180度，结束角度为270度，绘图方向顺时针的填充扇形

             DrawSector(canvas,Math.PI*1/2,Math.PI,50,true,false);

     </script>

 </body>

 </html>

效果如图:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAADJCAIAAAAmSN6vAAADLUlEQVR4nO3cUXEbMRRGYTMIhEAIhIUQCIZgCIZgCAvBEAzBEARBENSHPvQ+JNtpK+nKPeebAMj8J96V156cmmBO2b+AZjM5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4Jsfpnfx0WvFHgclxes/x/p4f2OSHes+xbfmBTX7I5Dgmx+k9x/WaH9jkh3rPse/5gU1+qPccj0d+YJMf6j1HrfmBTX5owBwLvjVXMGCO8zm/scm/N2COBU9wCgbMUUp+Y5N/b8wcq93OFYyZ43LJz2zyb4yZY7Vru4Jhc3x85Jc2+VeGzXG75Zc2+VeGzbHUYzgFI+dY55mMgpFzrHOIUzB4jkVe6AoGz7HIC13B+DlWeCyjYPwctba3N5OvY8oc97vJ1zFrjtxvviqYNUcpmZd3BRPnSLy8K5g7R9bpXcH0OVI+YVMwfY5aE6oryJjj+Zx9lFOQNMfk6gry5phZXUHqHNOqK8ie4/mccZpTsMAcE87wCpaZY+hTGgUrzXG/j7q1K1hsjlKGfOamYMk5ur/cFaw6R6097+4K1p6jlD7fkVXwCnP8DP8vl3oFrzNHre12+8t38ApecI5S2uXyZ/+1QMErz1FK2/d2Pv8+v4L/ZY5a2+PR9r1dr+3zs21b27ZffwoKnAPH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXF+AGtqTQ1G4qJFAAAAAElFTkSuQmCC" alt="" />

说明如图所示:

aaarticlea/png;base64,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" alt="" />

巴特西

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

最新文章

热门文章