HTML5 Canvas绘图圆点虚线案例

日期：2021-01-19 类型：科技新闻 

关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5

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出示了1个自身的画虚线的完成(http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas)，严苛的说，这是1个点划线的完成（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();
}
}
}

上一篇：HTML5究竟会有甚么发展趋势?HTML5的市场前景未来展 返回下一篇：没有了