如何用canvas绘制矩形？canvas画矩形的两种方法介绍

我们需要知道的是在canvas中与矩形相关的方法是rect()，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先，我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

    !DOCTYPE htML>
          html>
          head>
          meta charset="utf-8" />
          tITle>
    用canvas画矩形/title>
          style>
          /style>
          /head>
          body>
          canvas id="canvas" width="600" height="400">
    /canvas>
          script type="text/javascript">
        function draw(id){
                VAR canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
      //getContext() 方法可返回一个对象            context.fillStyle = "green";
      // 设置或返回用于填充绘画的颜色、渐变或模式                        context.fillRect(50,50,400,300);
  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形           }
           draw("canvas");
          /script>
          /body>
          /html>
    

canvas画有填充矩形的效果如下：

然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8" />
    title>
    用canvas画矩形/title>
    style>
    /style>
    /head>
    body>
    canvas id="canvas" width="600" height="400">
    /canvas>
    script type="text/javascript">
  function draw(id){
          var canvas = document.getElementById(id);
          var context = canvas.getContext('2d');
      //getContext() 方法可返回一个对象      context.strokeStyle = "pink";
      //图形边框的填充颜色      context.lineWidth = 5;
      //用宽度为 5 像素的线条来绘制矩形：           context.strokeRect(50,50,180,120);
      //绘制矩形（无填充）      context.strokeRect(110,110,180,120);
       }
     draw("canvas");
    /script>
    /body>
    /html>
    

canvas画无填充矩形的效果如下：

最后本篇文章到这里就结束了，关于canvas更多的相关知识可以参考HTML5开发手册。

以上就是如何用canvas绘制矩形？canvas画矩形的两种方法介绍的详细内容，更多请关注其它相关文章！

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