zoukankan      html  css  js  c++  java
  • Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b

    ----------------------------------------------------------------------------------------------

    Canvas 画圆

    W3School中对Canvas的画圆方法的描述如下:

    语法

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

    x, y                       描述弧的圆形的圆心的坐标。

    radius                    描述弧的圆形的半径。

    startAngle, 

    endAngle               沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

                                 沿着 X 轴正半轴的三点钟方向的角度为 0,角度沿着逆时针方向而增加。

    counterclockwise   弧沿着圆周的逆时针方向(TRUE)还是顺时针方向(FALSE)遍历。描述

    1. 我想很多人对startAngle和 endAngle两个参数不是很理解,我也是,经过摸索有了一点头绪,总结如下:

    startAngle: 沿着 X 轴正半轴的三点钟方向的角度为 0,其实说白了很简单,如下图:

    1
    2
    3
    4
    5
    ctx.fillStyle=grd;
    ctx.beginPath();
    ctx.arc(150,50,50,0,Math.PI/2,false);
    ctx.closePath();
    ctx.fill();

    这个图片的0度角就是图中圆的半径与X轴右方向的夹角,所以顺时针画出来的圆就是上面的效果

    2. 角度的表示:在我上面的代码中角度是Math.PI/2,初看可能不明白,其实仔细看一下就会想起来,这个是弧度,不明白就百度吧。

    那么如果我按照角度写会如何呢?

    1
    2
    3
    4
    ctx.beginPath();
    ctx.arc(150,50,50,0,360,true);
    ctx.closePath();
    ctx.fill();

    分别打开IE9,FF,Chrome看一下,奇怪的事情发生了:

    IE9 和FF:

    Chrome:

    不知道到底是什么原因,既然不知道原因,那么我们还是老老实实的使用弧度吧

  • 相关阅读:
    loadrunner获取Http信息头中指定值作为参数
    soapUI使用-DataSource获取oracle库中的参数
    [转]vim编辑器---批量注释与反注释
    String() 函数把对象的值转换为字符串。
    自定义滚动条mCustomScrollbar
    css实现强制不换行/自动换行/强制换行
    在网页中添加新浪微博“加关注”按钮
    移动前端调试方案(Android + Chrome 实现远程调试)
    font-family
    移动端touch事件滚动
  • 原文地址:https://www.cnblogs.com/jcz1206/p/3540732.html
Copyright © 2011-2022 走看看