繪制矩形

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

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

fillrect(x, y, width, height)

strokerect(x, y, width, height)

clearrect (x, y, width, height)

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

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

以下代碼將使用strokerect()方法來繪制左側的矩形，使用fillrect ()方法繪制右側的矩形，當用戶點擊“清除畫布”按鈕時，調用clearrect()方法清除整個畫布的內容。代碼如下：

清除畫布

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);

}

}

運行結果如圖 4?6 所示：

圖4-6 繪制矩形

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。