使用HTML5 Canvas API绘制弧线的教程


Posted in HTML / CSS onMarch 22, 2016

绘制标准圆弧

在开始之前,我们优化一下我们的作图环境。灵感来自于上节课的纹理,如果不喜欢这个背景,我在images目录下还提供了其他的背景图,供大家选择。另外把所有的样式表都写在了<head>下。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>新的画布</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.     }   
  28. </script>   
  29. </body>   
  30. </html>  

运行结果:
使用HTML5 Canvas API绘制弧线的教程

之所以要绘制一个空白的矩形填满画布,是因为我们之前说过,canvas是透明的,如果不设置背景色,那么它就会被我设置的<body>纹理所覆盖,想要使其拥有背景色(白色),只有绘制矩形覆盖canvas这一个方法。

怎么样,是不是非常的酷?

使用arc()绘制圆弧
arc()的使用方法如下:

JavaScript Code复制内容到剪贴板
  1. context.arc(x,y,radius,startAngle,endAngle,anticlockwise)  

前面三个参数,分别是圆心坐标与圆半径。startAngle、endAngle使用的是弧度值,不是角度值。弧度的规定是绝对的,如下图。
使用HTML5 Canvas API绘制弧线的教程

anticlockwise表示绘制的方法,是顺时针还是逆时针绘制。它传入布尔值,true表示逆时针绘制,false表示顺时针绘制,缺省值为false。

弧度的规定是绝对的,什么意思呢?就是指你要绘制什么样的圆弧,弧度直接按上面的那个标准填就行了。

比如你绘制 0.5pi ~ 1pi 的圆弧,如果顺时针画,就只是左下角那1/4个圆弧;如果逆时针画,就是与之互补的右上角的3/4圆弧。此处自己尝试,不再举例。

使用切点绘制圆弧

arcTo()介绍:
arcTo()方法接收5个参数,分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线,即由两个切线确定一条弧线。
具体如下。

JavaScript Code复制内容到剪贴板
  1. arcTo(x1,y1,x2,y2,radius)  

这个函数以给定的半径绘制一条弧线,圆弧的起点与当前路径的位置到(x1, y1)点的直线相切,圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更为简单的arc()替代的,其复杂就复杂在绘制方法上使用了切点。

使用切点绘制弧线:
下面的案例我把切线也绘制出来了,看的更清楚一些。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制弧线</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);   
  28.     };   
  29.   
  30.     function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){   
  31.         cxt.beginPath();   
  32.         cxt.moveTo(x0, y0);   
  33.         cxt.arcTo(x1, y1, x2, y2, r);   
  34.   
  35.         cxt.lineWidth = 6;   
  36.         cxt.strokeStyle = "red";   
  37.         cxt.stroke();   
  38.   
  39.         cxt.beginPath();   
  40.         cxt.moveTo(x0, y0);   
  41.         cxt.lineTo(x1, y1);   
  42.         cxt.lineTo(x2, y2);   
  43.   
  44.         cxt.lineWidth = 1;   
  45.         cxt.strokeStyle = "#0088AA";   
  46.         cxt.stroke();   
  47.   
  48.     }   
  49. </script>   
  50. </body>   
  51. </html>  

运行结果:
使用HTML5 Canvas API绘制弧线的教程

这个案例也很好说明了arcTo()的各个关键点的作用。为了更清楚的解释,我再标注一个分析图。
使用HTML5 Canvas API绘制弧线的教程

这里注意一下,arcTo()绘制的起点是(x0, y0),但(x0, y0)不一定是圆弧的切点。真正的arcTo()函数只传入(x1, y1)和(x2, y2)。其中(x1, y1)称为控制点,(x2, y2)是圆弧终点的切点,它不一定在圆弧上。但(x0, y0)一定在圆弧上。
有一点点绕,下面我们改变drawArcTo()函数的参数来试验一下。
(x2, y2)不一定在弧线上:

JavaScript Code复制内容到剪贴板
  1. drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);  

使用HTML5 Canvas API绘制弧线的教程

(x0, y0)一定在弧线上:

JavaScript Code复制内容到剪贴板
  1. drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);  

使用HTML5 Canvas API绘制弧线的教程

挺有意思的,它为了经过(x0, y0)直接将切点和(x0, y0)连接起来形成线段。好执着的弧线……

HTML / CSS 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 #HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 #HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 #HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 #HTML / CSS
HTML5 画布canvas使用方法
Mar 18 #HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 #HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 #HTML / CSS
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php动态变量定义及使用
2015/06/10 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python实现修改文件内容的方法分析
2018/03/25 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python中的时区问题
2021/01/14 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
我未来的职业规划范文
2014/01/11 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
交通事故协议书范文
2014/04/16 职场文书
总经理任命书范本
2014/06/05 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python