HTML5裡Canvas常用的繪圖技巧

在H5裡我們會常用到canvas這個元素來繪製圖形。那我們今天就來介紹一下canvas怎麼使用，canvas在哪些情形下可以使用。以及canvas的繪畫技巧

canvas 用於在頁面上繪製圖形

canvas概述：

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

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

建立canvas

##height>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

 

繪製直線和矩形

#直線：

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,

       cxt.fillRect(10,10,#150,150,0);

# 

  繪製圓形：

1》   Html5  圓形的度數

2》   繪製圓形

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

      x,y 起始點

radius 半徑

startAngle  起點度數

#radius 半徑

#######1 ##endAngle 終點度數###### 繪製三角形  ######      BeginPath() 開始的繪圖路徑###### ###### 清除畫布元素：#####ox clearRect(x,y，width，height)  清除從(x,y) 寬高範圍內的畫布元素###### ######儲存並回覆canvas的###狀態###### ####Cxt.save()儲存狀態的######Cxt.restore() 回覆儲存的狀態，包括邊框和填滿顏色##############移動座標空間：######      Translate：畫布圓點移動######      Translate(150,150)######      原來的0，0 ---》150，150##      原來的0，0 ---》150，150## ###以上是## canvas元素的概述了，相信說了這麼多大家應該也已經理解了。更多精彩請關注php中文網其它相關文章！ ######相關閱讀：#########html 的

標籤需要怎麼使用############html文檔類型聲明怎麼寫#### ########HTML下拉式選單程式碼######

以上是HTML5裡Canvas常用的繪圖技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！