Question

所以我创建了一些方法来更轻松地创建画布。以下是与意外结果相关的部分：

var Functions = {
    createCanvas: function (width, height) {
        ...
        return {
            ...
            line: function (obj) {
                var ctx = this.ctx;
                ctx.save();
                ctx.moveTo(obj.x, obj.y);
                ctx.lineTo(obj.a, obj.b);
                ctx.lineWidth = (obj.width || 1);
                ctx.strokeStyle = (obj.color || "black");
                ctx.stroke();
                ctx.restore();
                return this;
            },
            ...
        }
    }
}

这确实有效，它确实在正确的位置绘制了一条线，但是当我以这种方式指定颜色时，似乎总是使用为链中绘制的所有线指定的最后颜色：

Functions.createCanvas(100, 100).line({
    x: 10, y: 0.5,
    a: 90, b: 0.5,
    color: "blue"
}).line({
    x: 10, y: 2.5,
    a: 90, b: 2.5,
    color: "red"
});

第一行应为蓝色;然而，不知怎的，它最终会变成红色。

我无法找到问题所在，因为第一行应该在调用第二个line()之前绘制。有什么想法吗？

以下是整篇文章：http://jsfiddle.net/DerekL/nzRSY/

Answer 1

确保使用ctx.beginPath（）;

开始绘制线条图

       line: function (obj) {
            var ctx = this.ctx;
            ctx.beginPath();            // or else the next fillstyle will overwrite
            ctx.save();
            ctx.moveTo(obj.x, obj.y);
            ctx.lineTo(obj.a, obj.b);
            ctx.lineWidth = (obj.width || 1);
            ctx.strokeStyle = (obj.color || "black");
            ctx.stroke();
            ctx.restore();
            return this;
        },

意想不到的颜色？

1 个答案: