0
我正在为canvascontext写一些额外的drawfunction。下面的代码应该允许用户用虚线或法线绘制圆角矩形。这几乎是完整的工作代码,但在绘制结束时,在圆角处绘制了一条额外的线条(我包含了该问题的图片)。请注意,只有在绘制矩形虚线时出现此问题,而其他版本则完美。圆角矩形虚线
if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo){
CanvasRenderingContext2D.prototype.dashedLine = function(pt1, pt2, dashLen) {
if (dashLen == undefined) dashLen = 6;
var dX = pt2.x - pt1.x;
var dY = pt2.y - pt1.y;
var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY)/dashLen);
var dashX = dX/dashes;
var dashY = dY/dashes;
var q = 0;
while (q++ < dashes) {
pt1.x += dashX;
pt1.y += dashY;
this[q % 2 == 0 ? 'moveTo' : 'lineTo'](pt1.x, pt1.y);
}
this[q % 2 == 0 ? 'moveTo' : 'lineTo'](pt2.x, pt2.y);
};
CanvasRenderingContext2D.prototype.roundRectangle = function(pt1, pt2, pt3, pt4, dashed, dashLen) {
function line(ctx, x1, y1, x2, y2, dashed) {
if (dashed) ctx.dashedLine({x:x1, y:y1}, {x:x2, y:y2});
else {
ctx.lineTo(x2,y2);}
}
var radius = 8;
this.beginPath();
line(this, pt1.x + radius, pt1.y, pt2.x - radius, pt2.y, dashed);
this.quadraticCurveTo(pt2.x, pt2.y, pt2.x, pt2.y + radius);
line(this, pt2.x, pt2.y + radius, pt3.x, pt3.y - radius, dashed);
this.quadraticCurveTo(pt3.x, pt3.y, pt3.x - radius, pt3.y);
line(this, pt3.x - radius, pt3.y, pt4.x + radius, pt4.y, dashed);
this.quadraticCurveTo(pt4.x, pt4.y, pt4.x, pt4.y - radius);
line(this, pt4.x, pt4.y - radius, pt1.x, pt1.y + radius, dashed);
this.quadraticCurveTo(pt1.x, pt1.y, pt1.x + radius, pt1.y);
this.closePath();
this.stroke();
this.fill();
}
}
有谁知道什么可以在这里是什么问题?
感谢您解决这个问题,但我想添加填充选项,以便背景可以着色。当我这样做时,只有二次曲线区域被着色,所以我需要这条路径。我在这里更改了代码:http://jsfiddle.net/W8b3e/2/ – Consec 2012-03-28 12:13:21