溫馨提示×

溫馨提示×

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

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用canvas繪制矩形有哪些方法

發(fā)布時間：2020-07-16 15:07:15 來源：億速云 閱讀：267 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了使用canvas繪制矩形有哪些方法，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

我們需要知道的是在canvas中與矩形相關的方法是rect()，使用 stroke() 或 fill() 方法在畫布上實際地繪制矩形。

rect()方法能接收 4 個參數(shù)：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數(shù)的單位都是像素。

下面我們就來分別利用strokerect()和fillrect()方法來實現(xiàn)繪制矩形。

首先，我們來看看利用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繪制矩形有哪些方法

然后我們來看一看利用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繪制矩形有哪些方法

上述內容就是使用canvas繪制矩形有哪些方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

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

AI
助
手