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>