我負責做帆布剪裁和我與所有的邏輯完成,但一個要求是尚未完成,即畫出一個虛線框,而選擇裁剪區域,如:如何在畫布上繪製虛線矩形?
strokeRect(x, y, width, height)
我怎樣才能畫一個虛線的矩形?
我負責做帆布剪裁和我與所有的邏輯完成,但一個要求是尚未完成,即畫出一個虛線框,而選擇裁剪區域,如:如何在畫布上繪製虛線矩形?
strokeRect(x, y, width, height)
我怎樣才能畫一個虛線的矩形?
有沒有在功能上沒有專爲虛線,但在這裏我們用自定義JS原型的例子:
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dy/dx;
var distRemaining = Math.sqrt(dx*dx + dy*dy);
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt(dashLength*dashLength/(1 + slope*slope));
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
這已被添加到畫布規範,並非所有的瀏覽器都已經實現了它,但在這裏。
context.setLineDash([6]);
context.strokeRect(0, 0, 50, 50);
Is there針對不支持此功能的瀏覽器的解決方法? – BrightIntelDusk 2014-03-18 16:24:40
是的,你當然可以在JavaScript中實現一個polyfill。 user319198的答案可能有效? – 2014-03-19 17:41:03
這應該是被接受的答案 – 2017-09-14 19:29:18
這並不簡單。請參閱:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – RSG 2011-12-30 08:28:37
看看這個問題:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – techfoobar 2011-12-30 08:32:16