rectangle函数在HTML5 Canvas中的使用

发布时间：2024-08-09 14:35:25 作者：小樊
来源：亿速云阅读：79

在HTML5 Canvas中，可以使用以下代码来绘制一个矩形：

<!DOCTYPE html>
<html>
<head>
  <title>Rectangle Example</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    function drawRectangle() {
      ctx.beginPath();
      ctx.rect(20, 20, 150, 50);
      ctx.stroke();
    }

    drawRectangle();
  </script>
</body>
</html>

在这个例子中，我们创建了一个简单的HTML页面，其中包含一个Canvas元素和一个JavaScript脚本。在JavaScript中，我们获取了Canvas元素的上下文对象ctx，然后定义了一个名为drawRectangle的函数，该函数使用ctx的rect()方法在Canvas上绘制一个矩形。最后，我们调用drawRectangle函数来绘制矩形。

注意：为了让矩形显示出来，需要在Canvas元素上调用stroke()方法来描边矩形。

rectangle函数在HTML5 Canvas中的使用

相关阅读