2

そこで、キャンバスをより簡単に作成するためのいくつかの小さなメソッドを作成しました。予期しない結果に関連する部分は次のとおりです。

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()2番目の行が呼び出される前に最初の行がすでに描画されている必要があるため、問題がどこにあるかを実際に見つけることができませんでした。何か案が？

ここにすべてがあります：http://jsfiddle.net/DerekL/nzRSY/

4

1 に答える 1

4

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;
        },
于 2013-06-12T03:10:04.910 に答える