这篇文章主要为大家详细介绍了canvas绘制渐变矩形的方法，图文详解容易学习，配合代码阅读理解效果更佳，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。
<canvas> 标签可以用来绘制图形，但是要通过JavaScript脚本来实现效果，因为<canvas>标签只是一个装图形的容器，效果的实现要借助JavaScript脚本。我们可以用canvas绘制直线，圆形，矩形，字符等等。
举例1：用canvas绘制一个红色矩形，具体步骤如下：
第一步：用document.getElementById( )找到 <canvas> 元素
第二步：用getContext("2d")创建 context 对象
第三步：fillStyle属性可以设置矩形颜色，本例将其设置为红色；fillRect(x,y,width,height) 方法可以绘制已填色的矩形，x表示矩形左上角的X轴坐标，y表示矩形左上角的Y轴坐标，width表示矩形的宽度，height表示矩形的高度
完整代码如下：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(25,10,150,80);
</script>效果图：
举例2：用canvas绘制一个渐变矩形，代码如下所示：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"orange");
grd.addColorStop(1,"red");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(25,10,150,80);
</script>createLinearGradient(x,y,x1,y1) 可以创建线性渐变，使用渐变时，必须使用两种或者两种以上的颜色
addColorStop()方法表示颜色停止，可以是0至1
用fillStyle设置矩形颜色，然后用fillRect(x,y,width,height)绘制矩形
效果如图所示：
以上就是canvas绘制渐变矩形的方法，代码详细清楚，如果在日常工作遇到这个问题，希望你能通过这篇文章解决问题。如果想了解更多相关内容，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
