Draw an arc

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);

参数一是圆心的x坐标值，参数二是圆心y轴坐标值，参数三是半径，参数四是起始弧度，参数五十终止弧度，最后一个参数表示的绘制方向，默认的是false表示的是顺时针的方向。如果是true表示的是逆时针方向。

注意了弧度制都是固定好了。如上图所示

请看下面的一段程序

<!DOCTYPE html>
<html>
<head>
<title>canvas详解</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
context.arc(100,100,50,0,1.5*Math.PI);
context.stroke();

</script>
</body>
</html>

结果显示：

如果在context.arc(100,100,50,0,1.5*Math.PI,true);表示的是逆时针从0度到1.5PI处，结果如下图

所以从上面的例子可以看出，弧度值是固定的，不是说顺时针画时就以顺时针的方向来看，逆时针画时就以逆时针的方向来看。这一点千万要注意。

再来看一个程序

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}

结果显示如下：

这时候大家会感到奇怪了，为什么画出来的是一个封闭的图形呢？

其实这是closePath另外一个作用了，当前我们绘制的路径不是封闭的路径时，closePath()会将自动路径封闭。

如果这样的话

for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}

生成的就是一段段的弧，不会是封闭的了。

而且我们使用了beginPath(),canvas会知道我们是重新画一条，如果给这几条设置不同的属性也是可以的。

接下来在看一个问题

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.fillStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.fill();
}

如果是这样的话，结果会是填充的几个弧形

，如果我们去掉了closePath(),结果也会是一样的。

为什么呢？

因为如果调用了fill()的话，canvas会自动的找寻首尾然后将其连接起来，然后在填充。

canvas还有很对绘制接口，我将在下一张具体讲解canvas的其他知识。

canvas详解---绘制弧线的更多相关文章

  1. canvas详解----绘制线条

    <!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> &l ...

  2. canvas详解---矩形绘制

    首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...

  3. Android之canvas详解

    首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. 转载爱哥自定义View系列－－Canvas详解

    上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...

  6. canvas绘制线条详解

    canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...

  7. android 开发 View _6_Canvas详解

    牛逼大神的博客地址:http://www.gcssloop.com/customview/Canvas_BasicGraphics 安卓自定义View进阶-Canvas之绘制图形 在上一篇自定义Vie ...

  8. 图形绘制 Canvas Paint Path 详解

    图形绘制简介        Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...

  9. 【转】Android Canvas绘图详解（图文）

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

随机推荐

  1. 【Gamma】 Phylab 发布说明

    Phylab Gamma阶段发布说明 一.发布地址 网站:Phylab GitHub Release: WhatAHardChoice/Phylab Gamma版本 二.新功能 1. 控制台完全接入 ...

  2. prometheus自定义监控指标——实战

    上一节介绍了pushgateway的作用.优劣以及部署使用,本机通过几个实例来重温一下自定义监控指标是如何使用的. 一.监控容器启动时间(shell) 使用prometheus已经两个月了,但从未找到 ...

  3. javascript 数组之间增加某个符合arr.join('、');

    var arr=["a","b","c"]; arr.join(',');//返回值是字符串:a,b,c

  4. Modbus 协议-Ascii,RTU

    Modbus 协议之 Ascii 下载地址:http://download.csdn.net/detail/woxpp/5043249 1.提供Modbus Ascii 相关发送与接收代码 2.提供M ...

  5. CF573E Bear and Bowling 贪心、分块、凸包

    传送门 题解搬运工++ 先证明一个贪心做法的正确性:做以下操作若干次,每一次考虑选择没有被选到答案序列中的数加入到答案序列中对答案的贡献,设第\(i\)个位置的贡献为\(V_i\),如果最大的贡献小于 ...

  6. Java学习：构造方法

    构造方法: 构造方法是专门用来创建对象的方法,当我们通过关键字new来创建对象时,其实就是再调用构造函数. 格式: public 类名称(参数类型 参数名称){ 方法体 } 注意事项: 构造方法的名称 ...

  7. ORA-01779: 无法修改与非键值保存表对应的列

    项目中通过子查询更新数据时遇到ORA-01779: 无法修改与非键值保存表对应的列,模拟过程如下: 1.创建测试表 CREATE TABLE tt1 (ID INT,col1 VARCHAR2()); ...

  8. 开源规则引擎 Drools 学习笔记 之 -- 1 cannot be cast to org.drools.compiler.kie.builder.impl.InternalKieModule

    直接进入正题 我们在使用开源规则引擎 Drools 的时候, 启动的时候可能会抛出如下异常: Caused by: java.lang.ClassCastException: cn.com.cheng ...

  9. DBA职业发展之路：去“IOE”等挑战之下，DBA将何去何从？

    DBA职业发展之路:去“IOE”等挑战之下,DBA将何去何从? 摘要:随着近些年来,开源.自动化.云化的兴起,DBA职业也正悄然发生一些变化.面对一系列新的挑战,DBA将如何进行职业发展?本文将给出一 ...

  10. 华为 S5700 交换机 批量修改端口方法

    常常在配置交换机端口的时候需要将多个端口设置为相同的配置,当时各端口逐一去配置不仅慢,而且容易出错,这个时候就需要对端口进行批量设置,不仅快捷,而且避免了反复输出容易出错的情况.不同系列.不同版本交换 ...