HLJ 发布于
2018-08-20 10:25:28

HTML5 Canvas创建矩形

上一篇文章:

HTML5 Canvas自定义形状

下一篇文章:

HTML5 Canvas创建圆

要使用HTML5 Canvas创建矩形,我们可以使用rect()方法而不是使用4条连接线构建形状。 HTML5 Canvas矩形使用x和y参数定位,并使用width和height参数调整大小。 矩形位于其左上角附近。
html代码:
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-20/141.html
最后生成于 2023-06-18 18:37:43
上一篇文章:

HTML5 Canvas自定义形状

下一篇文章:

HTML5 Canvas创建圆

此内容有帮助 ?
0