zoukankan      html  css  js  c++  java
  • 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>

    效果如图:

    说明如图所示:

  • 相关阅读:
    一个小厂算法工程师的2021个人年终总结
    优达学城 UdaCity 纳米学位
    Eclipse 常用可视化开发插件
    Android创建文件夹和文件
    Windows Mobile 播放声音文件
    C++实现顺序栈类
    c++实现的图类
    常见的字符串操作
    常见的链表操作
    取余数法实现哈希表(包括开放定址法和链地址法解决冲突)
  • 原文地址:https://www.cnblogs.com/liubeimeng/p/3866124.html
Copyright © 2011-2022 走看看