HTML5 Canvas绘图圆点虚线案例

日期:2021-02-25 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

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();
}
}
}