问题描述
##使用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>