HTML5 Canvas绘制圆点虚线实例


Posted in HTML / CSS onJanuary 01, 2015

HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法。这样的设计有时会带来很大的不便,《JavaScript权威指南》的作者David Flanagan就认为这样的决定是有问题的,尤其是在标准的修改和实现都比较简单的情况下 (“…something that is so trivial to add to the specification and so trivial to implement… I really think you’re making a mistake here” — http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011224.html)。

在Stack Overflow上,Phrogz提供了一个自己的画虚线的实现(http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas),严格的说,这是一个点划线的实现(p.s. 我认为该页面上Rod MacDougall的简化版更好)。那么,如果需要画圆点虚线(如下图所示),应该怎么办呢?

HTML5 Canvas绘制圆点虚线实例

以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考Phrogz与Rod MacDougall的方法来添加斜线描画的功能。

复制代码
代码如下:

var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
canvasPrototype.dottedLine = function(x1, y1, x2, y2, interval) {
if (!interval) {
interval = 5;
}
var isHorizontal=true;
if (x1==x2){
isHorizontal=false;
}
var len = isHorizontal ? x2-x1 : y2-y1;
this.moveTo(x1, y1);
var progress=0;
while (len > progress) {
progress += interval;
if (progress > len) {
progress = len;
}
if (isHorizontal) {
this.moveTo(x1+progress,y1);
this.arc(x1+progress,y1,1,0,2*Math.PI,true);
this.fill();
} else {
this.moveTo(x1,y1+progress);
this.arc(x1,y1+progress,1,0,2*Math.PI,true);
this.fill();
}
}
}
HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 #HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 #HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 #HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
用cssText批量修改样式
2009/08/29 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
回调函数的意义以及python实现实例
2017/06/20 Python
django 常用orm操作详解
2017/09/13 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
浅析Python四种数据类型
2018/09/26 Python
Python的历史与优缺点整理
2020/05/26 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
《夏夜多美》教学反思
2014/02/17 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
工程款催款函
2015/06/24 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技