使用canvas繪制矩形有哪些方法-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是專業(yè)的臥龍網(wǎng)站建設(shè)公司，臥龍接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行臥龍網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

我們需要知道的是在canvas中與矩形相關(guān)的方法是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";  // 設(shè)置或返回用于填充繪畫的顏色、漸變或模式              
          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('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繪制矩形有哪些方法

上述內(nèi)容就是使用canvas繪制矩形有哪些方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

標題名稱：使用canvas繪制矩形有哪些方法-創(chuàng)新互聯(lián)
本文來源：http://aaarwkj.com/article42/cdhdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、服務(wù)器托管、面包屑導航、網(wǎng)站導航、移動網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

使用canvas繪制矩形有哪些方法-創(chuàng)新互聯(lián)