帆布上的彩色線LineTo

function TrackGraphic(model, canvas) { 
    //TrackModel 
    this._model = model; 
    this.draw = function(context) { 
     var dx = Math.cos(this._model.startAngle + Math.PI/2); 
     var dy = Math.sin(this._model.startAngle + Math.PI/2); 

     context.beginPath(); 
     context.lineWidth = 10; 
     context.moveTo(this._model.offsetX, this._model.offsetY); 
     //CurvePoint 
     var p; 
     for (var d = 0; d < this._model.length; d += 1) { 
      if (d > 1000) { 

       console.log('2F2F2F'); 
       context.strokeStyle = "#2F2F2F" //"rgb(255,165,0)"; //0x2F2F2F 

      } else { 
       context.strokeStyle = "#FFF" //"rgb(255,165,0)"; //0x2F2F2F; 
       console.log('FFFFFF'); 


      } 
      p = this._model.getTrackPoint(d); 
      context.lineTo(this._model.offsetX + p.x, this._model.offsetY + p.y) 
     } 
     context.stroke(); 
    } 
}

以上代碼會在畫布中生成線條。該行是一種顏色，我想在一開始或在任何市政顏色是不同的。我的代碼無效：（爲什麼？）如何修復它？帆布上的彩色線LineTo

來源

2012-05-13 Piotr Stanek

無論是線sgments或使用漸變色挺直線 – Alex

在構建路徑時更改顏色不起任何作用。當調用stroke()時，顏色僅應用一次，所以最後一個strokeStyle您設置將是整個線條的顏色。

beginPath()，moveTo()，lineTo()等只能創建一個路徑，該路徑本身沒有顏色，描邊或填充這條道路永遠只能應用於單一顏色。

如果你想要一個多種顏色的路徑，你必須做兩件事情之一：

開始一條路徑，做一些行數，繪製一種顏色，然後開始另一條路徑，它將用不同的顏色描邊。換句話說：

// make a red line segment 
ctx.beginPath(); 
ctx.moveTo(x, y); 
ctx.lineTo(x, y); 
ctx.strokeStyle = 'red'; 
ctx.stroke(); 
// Begin a new path and make this line segment green 
ctx.beginPath(); 
ctx.moveTo(x, y); 
ctx.lineTo(x, y); 
ctx.strokeStyle = 'green'; 
ctx.stroke(); 
//etc

，或者取決於你做，你也可以使用的LinearGradient

來源

2012-05-13 15:37:08

我已經做了這樣的事情，以測試內容。所以整個畫布的顏色是一樣的...... –

帆布上的彩色線LineTo

回答

相關問題