HTML5里Canvas常用的繪圖技巧

canvas 用于在頁面上 繪制圖形

canvas概述：

html5 canvas元素和javascript配合使用在頁面上繪制圖形

canvas是一個畫布，在畫布上繪制 路徑 矩形 圓形…

創(chuàng)建canvas

<canvas id width height></canvas>

canvas繪制圖形： ---》javascript繪制

Canvas本身沒有繪圖能力， 繪制工作都是在javascript中完成*****

js 得到元素

元素.getContext(“2d”) html5的內(nèi)建對象，繪制2d圖形 擁有 繪制矩形 路徑 圓形 字符…等方法

cxt.fillStyle = "#ff0000"; //繪制填充色

cxt.fillRect(25,10,150,75);//x,y,w,h 確定形狀 25,10 起點坐標(biāo)

注意：不支持canvas

<canvas id="myCanvas" width="200" height="100">

您的瀏覽器不支持canvas

</canvas>

繪制直線和矩形

直線：

cxt.moveTo(10,10); 原始起點

cxt.lineTo(150,50); 原始起點的終點，是同一個2d圖形的 下一條直線 起點

cxt.stroke(); 輸出

矩形：

cxt.strokeStyle = "#ff0000"; 矩形邊框色

cxt.strokeRect(10,10, 50, 50); 繪制矩形坐標(biāo)

cxt.fillStyle = "#ff0000";填充顏色

cxt.fillRect(10,10,150,150);填充位置

繪制圓形：

1》 Html5 圓形 的度數(shù)

2》 繪制圓形

cxt.arc(x,y,radius,startAngle,endAngle,其他參數(shù)(true 逆時針 false 順時針))

x,y 起點

radius 半徑

startAngle 起點度數(shù)

endAngle 終點度數(shù)

繪制三角形

BeginPath() 開始的繪制路徑

清除畫布元素：

Cxt.clearRect(x,y，width，height) 清除 從(x,y) 寬高范圍內(nèi)的畫布 元素

保存和回復(fù)canvas的狀態(tài)

Cxt.save()保存狀態(tài)的

Cxt.restore() 回復(fù)保存的狀態(tài)，包括邊框和填充色

移動坐標(biāo)空間：

Translate：畫布圓點移動

Translate(150,150)

原來的 0，0 ---》150，150

以上就是canvas元素的概述了，相信說了這么多大家應(yīng)該也已經(jīng)理解了。更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html 的<header>標(biāo)簽需要怎么使用

html文檔類型聲明怎么寫

HTML下拉菜單代碼

以上就是HTML5里Canvas常用的繪圖技巧的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！