本文介绍如何使用JavaScript在HTML5 Canvas中创建线性渐变。通过createLinearGradient定义坐标，利用addColorStop设置颜色节点，并赋值给fillStyle绘制矩形，实现从红到绿的平滑过渡效果。
Canvas线性渐变实现
本文介绍利用JavaScript结合HTML5 Canvas实现多种颜色渐变效果的具体方法，供读者参考。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>希望上述内容对Web程序设计有所帮助。