HTML画彩虹可以让网站更加生动有趣，大家都应该知道如何绘制出一个简单的彩虹。但是如果想要控制起点和终点是否在画布的这两个端点上，我们就需要加些额外的代码。下面就是关于如何设置彩虹的起点和终点的技巧：

<canvas id="myCanvas" width="400" height="200"></canvas> 
<script> 
//获取canvas画布及上下文 
var canvas=document.getElementById('myCanvas'); 
if(canvas.getContext){ 
var ctx=canvas.getContext('2d'); 
//创建渐变 
var gradient=ctx.createLinearGradient(0,0, canvas.width,0); 
//设置不同颜色断点 
gradient.addColorStop(0,'red'); 
gradient.addColorStop(.14,'orange'); 
gradient.addColorStop(.28,'yellow'); 
gradient.addColorStop(.42,'lime'); 
gradient.addColorStop(.56,'blue'); 
gradient.addColorStop(.70,'magenta'); 
gradient.addColorStop(.84,'red'); 
//用渐变来绘制 
ctx.strokeStyle=gradient; 
ctx.lineWidth=5; 
ctx.beginPath(); 
ctx.moveTo(0,100);
ctx.lineTo(400,100); //设置终点在画布宽度的中点 
ctx.stroke(); 
} </script>

上面的代码中，我们利用了createLinearGradient()方法创建了一个渐变对象，它的起点坐标是（0,0），终点坐标在画布的右端点，即Set-Up了其顶端为起点、底端为终点，绘制出一条七彩的线条对象。而在最后绘制线条的时候，我们把起点坐标设置在画布左端点，则终点坐标可以随意选择。在上面的示例中，我们设置了终点坐标在画布宽度的中点。