canvas 標(biāo)簽可以用來繪制圖形，但是要通過JavaScript腳本來實現(xiàn)效果，因為 canvas 標(biāo)簽只是一個裝圖形的容器，效果的實現(xiàn)要借助JavaScript腳本。我們可以用canvas繪制直線，圓形，矩形，字符等等。

舉例1：用canvas繪制一個紅色矩形，具體步驟如下：

第一步：用document.getElementById( )找到 canvas 元素

第二步：用getContext( 2d )創(chuàng)建 context 對象

第三步：fillStyle屬性可以設(shè)置矩形顏色，本例將其設(shè)置為紅色；fillRect(x,y,width,height) 方法可以繪制已填色的矩形，x表示矩形左上角的X軸坐標(biāo)，y表示矩形左上角的Y軸坐標(biāo)，width表示矩形的寬度，height表示矩形的高度

完整代碼如下：

 body  canvas id= myCanvas width= 200 height= 100 >
效果圖：
舉例2：用canvas繪制一個漸變矩形，代碼如下所示：
 body  canvas id= myCanvas width= 200 height= 100 >
createLinearGradient(x,y,x1,y1) 可以創(chuàng)建線性漸變，使用漸變時，必須使用兩種或者兩種以上的顏色
addColorStop()方法表示顏色停止，可以是0至1
用fillStyle設(shè)置矩形顏色，然后用fillRect(x,y,width,height)繪制矩形
效果如圖所示：
以上詳細(xì)介紹了用canvas繪制矩形和漸變矩形的方法，比較簡單，初學(xué)者可以自己動手嘗試，看看自己能不能繪制出更好看的圖形，希望這篇文章對你有所幫助！
更多相關(guān)教程請訪問 Html5視頻教程
以上就是如何用HTML5中的canvas繪制漸變矩形的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。