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:

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

  • 相关阅读:
    tomcat 7服务器跨域问题解决
    logstash 改变行分割符
    logstash 编码转换默认UTF8
    GIT常用命令
    GIT常用命令
    GIT常用命令
    介绍开发流程以及相关技术
    介绍开发流程以及相关技术
    介绍开发流程以及相关技术
    介绍开发流程以及相关技术
  • 原文地址:https://www.cnblogs.com/jcz1206/p/3540732.html
Copyright © 2011-2022 走看看