html线条 实线中带一圆点,科技常识：HTML5 Canvas绘制圆点虚线实例

今天小编跟大家讲解下有关HTML5 Canvas绘制圆点虚线实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 Canvas绘制圆点虚线实例 的相关资料，希望小伙伴们看了有所帮助。

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的简化版更好)。那么 如果需要画圆点虚线(如下图所示) 应该怎么办呢

以下是我自己的实现 只支持画水平的和垂直的圆点虚线 可以参考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(); } }}

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。