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绘图详解(图文) 泡 ...
随机推荐
- [Gamma]Scrum Meeting#7
github 本次会议项目由PM召开,时间为6月2日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 大作业截止,请假 前 ...
- Golang微服务实践
背景 在之前的文章<漫谈微服务>我已经简单的介绍过微服务,微服务特性是轻量级跨平台和跨语言的服务,也列举了比较了集中微服务通信的手段的利弊,本文将通过RPC通信的方式实现一个增删查Redi ...
- 【IntelliJ IDEA学习之七】maven专题
版本:IntelliJIDEA2018.1.4 一.maven全局设置 设置Runner 运行VM参数:-Xms128m -Xmx512m -Duser.language=zh -Dfile.enco ...
- Configuration类的@Value属性值为null
今天写的Configuration类的@Value属性值为null @Configuration public class MybatisConfigurer { @Value("${spr ...
- .NetCore快速搭建ELK分布式日志中心
懒人必备:.NetCore快速搭建ELK分布式日志中心 该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前言 ELK是什么 它是一个分布式日志解决方案,是Logstash.Elastaics ...
- Linux内核device结构体分析
1.前言 Linux内核中的设备驱动模型,是建立在sysfs设备文件系统和kobject上的,由总线(bus).设备(device).驱动(driver)和类(class)所组成的关系结构,在底层,L ...
- Linux学习笔记之grep命令和使用正则表达式
0x00 正则表达式概述 正则表达式是描述一些字符串的模式,是由一些元字符和字符组成的字符串,而这些元字符是一些表示特殊意义的字符,即被正则表达式引擎表达的字符表示与其本意不同的一些字符. 0x01 ...
- Angular复习笔记7-路由（上）
Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述 路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...
- Space Syntax（空间句法）
01 December 2019 13:16 https://spacesyntax.com/ 相关软件:Depthmap 空间句法理论作为一种新的描述建筑和城市空间模式的语言 ...
- 什么是B+树
什么是B+树呢?在说B+树之前我们先了解一下为什么要有B树,其实这些树最开始都是为了解决某种系统中,查询效率低的问题.B树其实最开始源于的是二叉树,二叉树是只有左右孩子的树,当数据量越大的时候,二叉树 ...