canvas 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

canvas 標簽只是圖形容器，您必須使用腳本來繪制圖形。

你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。

注意: 默認情況下 canvas 元素沒有邊框和內容。

畫方

 !--fillStyle是填充樣式，如果不設置fillStyle屬性，默認填充色為黑色，fillRect是畫一個矩形，參數為X,Y,Width,Height-- !DOCTYPE html html head meta charset= UTF-8 name= author content= 趙慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d ); ctx.fill > //ctx.moveTo(0,0); //定義開始坐標
 //ctx.lineTo(100,100); //定義結束坐標
 //ctx.stroke(); //繪制線條

 }) /script /head body canvas id= myCanvas width= 100 height= 100 /canvas /body /html 

運行結果：

畫圓

 !--arc畫圓，參數是X,Y,半徑，起始角，結束角，順時針/逆時針(可選)XY指的是圓點的距離-- !DOCTYPE html html head meta charset= UTF-8 name= author content= 趙慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d ); ctx.fill > //ctx.fillText( Hello World ,10,50); //繪制實心字體
 //ctx.strokeText( Hello World ,10,50); //繪制空心字體
}) /script style type= text/css canvas{border: 1px solid #000;} /style /head body canvas id= myCanvas width= 100 height= 100 /canvas /body /html 

運行結果：

漸變

createLinearGradient(x,y,x1,y1) - 創建線條漸變

createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

// 創建漸變var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0, red grd.addColorStop(1, blue // 填充漸變ctx.fill >
運行結果：
 徑向/圓漸變
var c=document.getElementById( myCanvas var ctx=c.getContext( 2d // 創建漸變var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0, red grd.addColorStop(1, white // 填充漸變ctx.fill >
運行結果：
圖像
 !DOCTYPE html html head meta charset= UTF-8 name= author content= 趙慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script style type= text/css canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;} /style /head body img src= img/a.ico id= flower / canvas id= myCanvas width= 100 height= 100 /canvas script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d var img=document.getElementById( flower  img.onload=function(){ ctx.drawImage(img,20,20,80,80); //drawImage（對象，X,Y，W,H）} }) /script /body /html 
運行結果：
（右圖為canvas圖像）
以上就是HTML5-canvas的使用方法介紹的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。