繪制矩形

上一節(jié)，我們使用lineto()方法繪制一個(gè)封閉的矩形。其實(shí)，canvas的api提供了rect()方法可以繪制矩形。rect()方法是路徑方法，它會把指定的矩形添加到當(dāng)前路徑的子路徑中。它只添加路徑，繪制圖形還是由stroke()或fill()方法完成。

除了rect()方法之外，canvas 的api還提供了三個(gè)直接處理矩形的方法：

fillrect(x, y, width, height)

strokerect(x, y, width, height)

clearrect (x, y, width, height)

這三個(gè)方法用來處理以(x, y)為左上角、寬度為width、高度為height的矩形區(qū)域，它們直接用來處理畫布上內(nèi)容的，并且都不是路徑方法，都不影響當(dāng)前路徑及路徑中的當(dāng)前點(diǎn)。

fillrect()方法填充矩形區(qū)域；strokerect()方法勾勒矩形邊框；clearrect()方法清除矩形區(qū)域內(nèi)的所有內(nèi)容，并將它恢復(fù)到初始狀態(tài)，即透明色。調(diào)用clearrect()方法時(shí)，可以把widht和height設(shè)置成跟畫布相同的尺寸，用來清除整個(gè)畫布上的內(nèi)容。

以下代碼將使用strokerect()方法來繪制左側(cè)的矩形，使用fillrect ()方法繪制右側(cè)的矩形，當(dāng)用戶點(diǎn)擊“清除畫布”按鈕時(shí)，調(diào)用clearrect()方法清除整個(gè)畫布的內(nèi)容。代碼如下：

清除畫布

function drawrect() {

var canvas ?= document.getelementbyid("canvas");

var context = canvas.getcontext('2d');

var clearme = document.getelementbyid("clearme");

context.strokerect(50, 20, 120, 100);

context.fillrect(220, 20, 120, 100);

clearme.onclick = function() {

context.clearrect(0, 0, canvas.width, canvas.height);

}

}

運(yùn)行結(jié)果如圖 4?6 所示：

圖4-6 繪制矩形

總結(jié)

以上是生活随笔為你收集整理的html5绘制矩形动画,HTML5下绘制矩形教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。