canvas動態畫一條不同顏色的線

問題描述

##使用canvas動態畫一條顏色不同的線，即前五個點連成一條黑線後五個點連成一條紅線，並且動態呈現。

思路呈現

首先，瞭解非動態畫一條不同顏色的線。

代碼展示：

    <script>
         //demo1 不漸變線條
 var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(50,0);  
  ctx.strokeStyle = "blue";    //設定描邊顏色爲藍色
  ctx.stroke();  
  
  ctx.beginPath();  //告訴canvas咱們要重新繪製一條全新的路徑了，之前畫的東西從此再無關係
  ctx.moveTo(50,0); 
  ctx.lineTo(150,0);  
  ctx.strokeStyle = "yellow";    //設定描邊顏色爲紅色
  ctx.stroke();  

  ctx.beginPath();  //告訴canvas咱們要重新繪製一條全新的路徑了，之前畫的東西從此再無關係
  ctx.moveTo(150,0); 
  ctx.lineTo(200,0);  
  ctx.strokeStyle = "blue";    //設定描邊顏色爲紅色
  ctx.stroke();  
  </script>

動態畫線，不外乎循環遍歷點，在點之間連線。（稍後附上代碼）

遇到的問題

##if判斷點的長度是不是大於某位數，再for循環遍歷，這樣做就會使得前面畫的線在第二條線出現時就消失了。

解決辦法

##在for循環里加長度判斷

代碼

：

 
 var options = this.trackLineOptions;
    var tp0 = this._map.latLngToLayerPoint(L.latLng(trackpoints[0].lat, trackpoints[0].lng));
    this._ctx.save();
    this._ctx.beginPath();//開始

    // 畫軌跡線
    this._ctx.moveTo(tp0.x, tp0.y);
    for (var i = 1, len = trackpoints.length; i < len; len<=15,i++) {
      var tpi = this._map.latLngToLayerPoint(L.latLng(trackpoints[i].lat, trackpoints[i].lng));
      this._ctx.lineTo(tpi.x, tpi.y); 
      this._ctx.strokeStyle = options.color; //設定描邊顏色爲紅色
      this._ctx.lineWidth = options.weight;   
      this._ctx.stroke(); 
     //把上一個的最後一個點保存下來
      if(i==15){
      var tp15=this._map.latLngToLayerPoint(L.latLng(trackpoints[15].lat, trackpoints[15].lng));
      this._ctx.save();
      this._ctx.beginPath();
      this._ctx.moveTo(tp15.x,tp15.y); //從上一個點的結束開始
      for(var i=16,len=trackpoints.length;i<len;len<=21,i++){
       var tpi = this._map.latLngToLayerPoint(L.latLng(trackpoints[i].lat, trackpoints[i].lng));
     this._ctx.lineTo(tpi.x, tpi.y); 
      this._ctx.strokeStyle = options.color1;  
      this._ctx.lineWidth = options.weight;  
      this._ctx.stroke();  
     //把上一個的點保存下來
      if(i==21){
        var tp21=this._map.latLngToLayerPoint(L.latLng(trackpoints[21].lat, trackpoints[21].lng));
        this._ctx.save();
        this._ctx.beginPath();
        this._ctx.moveTo(tp21.x,tp21.y); 
        for(var i=21,len=trackpoints.length;i<len;i++){
         var tpi = this._map.latLngToLayerPoint(L.latLng(trackpoints[i].lat, trackpoints[i].lng));
       this._ctx.lineTo(tpi.x, tpi.y); 
        this._ctx.strokeStyle = options.color;  //可以直接寫顏色
        this._ctx.lineWidth = options.weight;  //可以直接寫上線寬
        this._ctx.stroke();  //描邊
        }
      }
      }
    }
    }