html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html
在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。
canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。
arc的语法如下:
代码如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的参数我解释一下,即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆,该怎么搞?大家注意到参数中有个开始角度与结束角度,如果我们开始角度是0,结束角度是360,不就是个正圆了?
正解!但要注意的是,这里的角度是用“弧度”来表示的(Flash也是如此),一个完整的圆即360度,就是2PI弧度。
所以我们这么写:
ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一样,arc也是画的路径,所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了红色的strokeStyle与半透明红色的fillStyle)。
现在我们来画一个1/4圆,角度嘛,就是90度。前面说了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
代码如下:
ctx.arc(400,400,20,0,Math.PI*2/4);
由图我们可以确定arc的0度就是数学上常用的0度,但是角度默认是顺时针张开的,与数学模型相反(跟坐标有关,因为canvas坐标也与数学坐标相反)。
不过前面不是有个参数是确定是否逆时针吗?我们把他设为true如何?
ctx.arc(400,400,20,0,Math.PI*2/4,true);
你会看到,角度变成了逆时针展开,导致弧线变成了360-90=270度。
但是!大家要注意一点,就是起点与终点的计算方式,始终是以0度为起点,并顺时针延伸的,不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆,而且更方便计算。
不过,灵活的使用逆时针,有时候很有用。
上面的例子,我们的起点角度都是0,现在我们试试其他的起点角度吧,比如90度。
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);
如果我们起点是90度而终点也是90度,那结果就是什么都不得画,所以我把终点角度改成了180度,最后得到下图的图形。
问题:如果我们从非0度起点来画一个完整的圆,行不行?当然也可以,只要你把弧线的终点设置为360度+起点角度,如:
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起点90度,终点360+90度
不过这种做法纯属没事找事,正常人是不会用的。
总结:Canvas的arc方法是画正圆弧线的办法,也只能画正弧线,没法画其他奇怪的弧线,比如S形——虽然我最喜欢S形了。
html5 Canvas画图教程(5)—canvas里画曲线之arc方法相关推荐
- python画曲线代码_在Python里画曲线
在Python里画曲线,常常用到wx.DC(设备上下文)和wx.Pen画笔,有可能需要下面的资源: wx.BufferedDC:用于缓存一套绘画命令,直到命令完整并准备在屏幕上绘画.这防止了显示中不必 ...
- html5 arc 椭圆,html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟. 我们首先要明确画一个椭圆需要那些参数,基本的几 ...
- html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
- 在html5绘制直线的两个方法,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: v ...
- [转]html5 Canvas画图教程(1)—画图的基本常识
今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...
- CAD画图教程:CAD怎么画一条指定长度的线?
在CAD入门学习过程中,画直线是基础操作之一,所以一定要对此熟练掌握才可以.那你知道CAD怎么画一条指定长度的线吗?本节CAD画图教程就和小编一起来了解一下在浩辰CAD软件中怎么画一条指定长度的直线吧 ...
- html5图片上写字,Html5 canvas画图教程20:在canvas里写字
文章写到现在才发现我忘了介绍在canvas上写字的方法,呃,这篇补上. 其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边文字)和fillText(填充文字)--一看就 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
最新文章
- 如何成为自己所在领域内前1%的顶尖人才? 凤凰科技 09-29 07:42 原标题:如何成为自己所在领域内前1%的顶尖人才? 有时你会觉得,可能你永远也实现自己的梦想。你清楚地知道自己想做什么,但有
- 使用JavaScript调用aspx后台代码
- 复制初始化和直接初始化
- LeetCode上删除链表末尾第N个节点算法——Remove Nth Node From End of List
- halcon车刀崩边检测
- 划入 .NET 6版本目标,微软鼓励开发人员信任第三方库
- SiftingAppender:将不同的线程记录到不同的日志文件中
- 《解析几何》吕林根,徐子道第四版 习题 1.4.7,1.4.8,1.4.9
- [杂]实用工具与链接
- 从苹果供应商看2018年全球电子产业链的中国势力变化
- 微信公共号申请图文详解
- OpenJDK构建工具IcedTea 1.7发布
- Delphi IdHTTP1下载文件防止假死 ( - 大悟还俗
- Go语言的strings包字符串处理二之字符串操作函数
- 欢迎大家加入我的Q群
- zoom:1的清楚浮动原理?
- 多行文本溢出显示省略号(…) +css样式
- 在线博客系统——获取用户信息,退出登录
- python真的如此好吗?
- getoutputstream java_Java已为此响应调用getOutputStream()