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绘图详解(图文) 泡 ...
随机推荐
- Shell脚本之二 变量、字符串和数组
一.Shell 变量 1.1 定义变量 定义变量时,变量名不加美元符号($),如: your_name="runoob.com" 注意,变量名和等号之间不能有空格,这可能和你熟悉的 ...
- css3自定义上传图片输入框的方法
css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupia ...
- linux中用一个.sh文件执行多个.sh文件
建一个文件夹存放你自己的.sh文件(用命令行操作) 先进入到: cd usr/local/sbin 目录里面 然后再新建一个文件夹: sudo mkdir myshell 建一个文件夹专门存放自己 ...
- Windows设置国内源阿里云镜像加速与离线安装pip包的方法
Windows设置国内源阿里云镜像加速1.先在 windows “文件资源管理器” 地址栏 输入 %APPDATA% 按回车,打开程序自定义设置文件夹然后,创建名为 pip 的文件夹,用于存放 pip ...
- MD5加盐与安全
PHP开发者对md5()这个函数是熟悉不过了,很多开发者都使用md5('abc123')对用户密码进行加密处理,这样做没有错,但是安全性还是很低的,因为很多网站的用户数据都是用md5进行加密处理的,所 ...
- 最小生成树 --- 求最小权值、MST
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37109 Accepted: 14982 Descri ...
- C语言向txt文件写入当前系统时间(Log)
程序实现很简单,涉及到的只有两个知识点. 1.文件最最基本的打开关闭: 2.系统时间的获取. 代码是在VS2019环境下编写的,部分函数在其他编译器中会无法识别.这个就只能需要自己去查找对应的函数简单 ...
- k8s-Namespace(命名空间)
k8s-Namespace(命名空间) Namespace(命名空间)是Kubernetes系统中的另一个非常重要的概念,通过将系统内部的对象“分配”到不同的Namespace中,形成逻辑上分组的不同 ...
- syntax error near unexpected token 脚本报错误解决
hadoop老师给了一个shell文件,在windows里面瞅了一眼然后在ubuntu环境下运行就报错了.看了一些博客,用vim -b filename查看的时候发现每一行的末尾都多了一个^M.... ...
- mvc_第一遍_业务逻辑层和模型
常用的动态网页对象: 之前我们提到了,使用request对象可以获得和用户请求相关的一系列信息.这一节,我们来看看另外两个常用对象的常规用途. response对象:用于向客户回应.最常用的用法类似于 ...