如何用HTML5中的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绘制矩形和渐变矩形的方法，比较简单，初学者可以自己动手尝试，看看自己能不能绘制出更好看的图形，希望这篇文章对你有所帮助！

更多相关教程请访问 HTML5视频教程

以上就是如何用HTML5中的canvas绘制渐变矩形的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！