[英]How to draw a dashed line rectangle in canvas?
我的任务是在画布上进行裁剪,我已经完成了所有逻辑但是还有一个要求尚未完成,即在选择裁剪区域时绘制虚线矩形,如:
strokeRect(x, y, width, height)
如何绘制虚线矩形?
这已被添加到画布规范中,并非所有浏览器都已实现它,但现在它已经实现了。
context.setLineDash([6]);
context.strokeRect(0, 0, 50, 50);
虚线没有内置功能,但这是使用自定义JS原型的示例:
参考: <canvas>中的虚线描边
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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.