溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用HTML5 canvas繪制一個(gè)矩形的方法

發(fā)布時(shí)間：2020-08-29 11:23:12 來(lái)源：億速云 閱讀：317 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)使用HTML5 canvas繪制一個(gè)矩形的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

使用HTML5 canvas繪制一個(gè)矩形，我們需要用到Canvas上下文的rect（）方法。

使用HTML5 canvas繪制一個(gè)矩形的方法

我們來(lái)看一個(gè)具體的例子

代碼如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.fillStyle = 'peachpuff';
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'coral';
    context.stroke();
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

說(shuō)明：

由document.getElementById()方法獲取Canves對(duì)象，Canves對(duì)象通過(guò)調(diào)用getContext()方法，用于獲取畫(huà)布上下文的過(guò)程是與在畫(huà)布上繪制時(shí)共同處理的。

調(diào)用上下文的beginPath()方法來(lái)啟動(dòng)路徑。用rect()繪制一個(gè)矩形。rect的第一個(gè)參數(shù)和的第二個(gè)參數(shù)是矩形左上角的X，Y坐標(biāo)。第三個(gè)參數(shù)是繪制矩形的寬度，第四個(gè)參數(shù)是繪制矩形的高度。

使用fill()方法填充內(nèi)部并使用stroke方法繪制輪廓線。

運(yùn)行結(jié)果

使用Web瀏覽器執(zhí)行創(chuàng)建的HTML文件。將顯示如下所示的效果。

使用HTML5 canvas繪制一個(gè)矩形的方法

上述示例的矩形填充了內(nèi)部，下面我們來(lái)看看沒(méi)有內(nèi)部填充的矩形

代碼如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景色和背景圖*/
    .canvas{
      background-color:#FFFFFF;
      background-image: url("img/t.jpg");
    }
    -->
  </style>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.lineWidth = 4;
    context.strokeStyle = 'coral';
    context.stroke();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

說(shuō)明：在繪制圖像時(shí)，如果不調(diào)用fill（）方法，只執(zhí)行stroke（）方法，就能繪制內(nèi)部不填充的矩形。

運(yùn)行結(jié)果

在瀏覽器上顯示如下效果

使用HTML5 canvas繪制一個(gè)矩形的方法

最后我們來(lái)看直接填充內(nèi)部的矩形繪制

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(260, 120, 220, 120);
    context.fillStyle = 'burlywood';
    context.fill();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

運(yùn)行結(jié)果如下所示

使用HTML5 canvas繪制一個(gè)矩形的方法

關(guān)于使用HTML5 canvas繪制一個(gè)矩形的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手