canvas 用于在頁面上 繪制圖形

canvas概述：

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

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

創建canvas

<canvas id width height></canvas>

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

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

js 得到元素

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

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

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

注意：不支持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); 繪制矩形坐標

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

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

繪制圓形：

1》 Html5 圓形 的度數

2》 繪制圓形

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

x,y 起點

radius 半徑

startAngle 起點度數

endAngle 終點度數

繪制三角形

BeginPath() 開始的繪制路徑

清除畫布元素：

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

保存和回復canvas的狀態

Cxt.save()保存狀態的

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

移動坐標空間：

Translate：畫布圓點移動

Translate(150,150)

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

以上就是canvas元素的概述了，相信說了這么多大家應該也已經理解了。更多精彩請關注php中文網其它相關文章！

相關閱讀：

html 的<header>標簽需要怎么使用

html文檔類型聲明怎么寫

HTML下拉菜單代碼

以上就是HTML5里Canvas常用的繪圖技巧的詳細內容，更多請關注php中文網其它相關文章！