canvas详解---绘制弧线
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详解---绘制弧线的更多相关文章
- canvas详解----绘制线条
<!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> &l ...
- canvas详解---矩形绘制
首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...
- Android之canvas详解
首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- 转载爱哥自定义View系列－－Canvas详解
上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...
- canvas绘制线条详解
canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...
- android 开发 View _6_Canvas详解
牛逼大神的博客地址:http://www.gcssloop.com/customview/Canvas_BasicGraphics 安卓自定义View进阶-Canvas之绘制图形 在上一篇自定义Vie ...
- 图形绘制 Canvas Paint Path 详解
图形绘制简介 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...
- 【转】Android Canvas绘图详解（图文）
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
随机推荐
- react-native字体react-native-vector-icons在ios下的使用
react-native字体react-native-vector-icons在ios下的使用 官网和网上有各种针对ios/android的安装和使用方法:能够使用了,基本就等于安装成功了. reac ...
- Leetcode 初刷（1）
1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...
- 《Linux就该这么学》培训笔记_ch06_存储结构与磁盘划分
<Linux就该这么学>培训笔记_ch06_存储结构与磁盘划分 文章最后会post上书本的笔记照片. 文章主要内容: Linux系统的文件存储结构(FHS标准) 物理设备命名规则(udev ...
- 机器学习实战-logistic回归分类
基于LR的回归分类实例 概念 前提理解: 机器学习的三个步骤:模型,损失函数(即样本误差),优化求解(通过损失函数,使得模型的样本误差最小或小于阈值,求出满足条件的参数,优化求解包括:最小二乘法,梯度 ...
- (转)MyBatis传入多个参数的问题
背景:记录mybaitis的使用方法,博闻强记,后面尽量记忆使用. MyBatis传入多个参数的问题 MyBatis传入多个参数的问题 详细记录mybatis在传递多个参数时候的使用方法 关于Myba ...
- scrapy中间件中发送邮件
背景介绍:之前写过通过通过scrapy的扩展发送邮件,在爬虫关闭的时候发送邮件.那个时候有个问题就是MailSender对象需要return出去.这次需要在中间件中发送邮件,但是中间件中不能随便使用r ...
- thinkPHP5如何使用rabbitmq
thinkPHP5如何使用rabbitmq? 安装好 tp5 的 rabbitmq 扩展后,在项目根目录文件添加文件 rabbitmq.php 引导启动 rabbitmq. <?php defi ...
- 在电脑上部署网站lls 浏览器上访问
在win7 上安装,首先是要进入lls中进行设置,这是第一种方法: 通过图形化的操作方式进行设置, 这个界面中的东西都比较重要,电脑出现问题的话一般在这都可以进行调整,程序和功能可以用来管理你安装的软 ...
- Windows域的创建与加入教程
一.说明 以前看书的时候时常看到“域”这个词,后来听一些渗透的演讲通常会说进入内网后首先要找域控.在认知中“域控”应该是域管理服务器一类的东西,但毕竟没有实现过所以还是不太懂长什么样. 前段时间朋友电 ...
- char[]，char *，string之间转换
char []与char *之间转换 char []转char *:直接进行赋值即可 // char[] 转char *char str[] = "lala";char *str1 ...