意外的顏色？

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; 
     },