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属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 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
php中函数的形参与实参的问题说明
2010/09/01 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
AngularJS中的缓存使用
2017/01/11 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python素数检测的方法
2015/05/11 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
售后专员岗位职责
2013/12/08 职场文书
syb养殖创业计划书
2014/01/09 职场文书
调解员先进事迹材料
2014/02/07 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Python3接口性能测试实例代码
2021/06/20 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript