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

創(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框架,可快速的進(jìn)行臥龍網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

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

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

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

首先，我們來看看利用canvas中fillrect()方法繪制的有填充的矩形實(shí)例。

fillRect() 方法在畫布上繪制的矩形會填充指定的顏色。填充的顏色通過fillStyle 屬性指定。

canvas畫有填充矩形的效果如下：

然后我們來看一看利用canvas中strokerect()方法繪制的無填充的矩形實(shí)例。

strokeRect() 方法在畫布上繪制的矩形會使用指定的顏色描邊。描邊顏色通過strokeStyle 屬性指定。

canvas畫無填充矩形的效果如下：

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

當(dāng)前名稱：使用canvas繪制矩形有哪些方法-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/cdhdhc.html