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();  //描边
        }
      }
      }
    }
    }