rectangle函數(shù)在HTML5 Canvas中的使用

發(fā)布時間：2024-08-09 14:35:25 來源：億速云閱讀：78 作者：小樊欄目：編程語言

在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>

在這個例子中，我們創(chuàng)建了一個簡單的HTML頁面，其中包含一個Canvas元素和一個JavaScript腳本。在JavaScript中，我們獲取了Canvas元素的上下文對象ctx，然后定義了一個名為drawRectangle的函數(shù)，該函數(shù)使用ctx的rect()方法在Canvas上繪制一個矩形。最后，我們調(diào)用drawRectangle函數(shù)來繪制矩形。

注意：為了讓矩形顯示出來，需要在Canvas元素上調(diào)用stroke()方法來描邊矩形。

向AI問一下細(xì)節(jié)

rectangle函數(shù)在HTML5 Canvas中的使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽