canvas是html5中新增的特性，它可以在浏览器上绘制出各种酷炫的效果，作为一个前端开发人员，你知道如何用canvas绘制图形吗？这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形，有一定的参考价值，感兴趣的朋友可以参考一下。
5ba626b379994d53f7acf72a64f9b697 标签可以用来绘制图形，但是要通过javascript脚本来实现效果，因为5ba626b379994d53f7acf72a64f9b697标签只是一个装图形的容器，效果的实现要借助javascript脚本。我们可以用canvas绘制直线，圆形，矩形，字符等等。
举例1：用canvas绘制一个红色矩形，具体步骤如下：
第一步：用document.getelementbyid( )找到 5ba626b379994d53f7acf72a64f9b697 元素
第二步：用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绘制矩形和渐变矩形的方法，比较简单，初学者可以自己动手尝试，看看自己能不能绘制出更好看的图形，希望这篇文章对你有所帮助！
更多相关教程请访问 html5视频教程
以上就是如何用html5中的canvas绘制渐变矩形的详细内容。