如何用canvas繪製長方形？ canvas畫矩形的兩種方法介紹-H5教程-PHP中文網

如何用canvas繪製長方形？ canvas畫矩形的兩種方法介紹

不言

發布： 2018-09-17 13:43:45

原創

17294 人瀏覽過

canvas元素使用JavaScript在網頁上繪製圖像。畫布是一個矩形區域，您可以控制其每個像素。 canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。所以，如何用canvas繪製一個長方形呢？ 接下來這篇文章將要為大家介紹關於canvas畫一個長方形的實作方法的內容，若是有需要的話可以看看。

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

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

下面我們就來分別利用strokerect()和fillrect()方法來實作繪製矩形。

首先，讓我們先來看看利用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(&#39;2d&#39;);  //getContext() 方法可返回一个对象  
          context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
          context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
     }  
     draw("canvas");  
    </script>  
    </body>  
    </html>

登入後複製

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(&#39;2d&#39;);  //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畫矩形的兩種方法介紹