html5學習筆記6 canvas

2021-10-07 11:33:10 字數 1775 閱讀 1337

繪製普通直線,先看效果圖:

實現**如下:

doctype html


>


<


html


>


<


head 


lang


="en"


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


script


>


function


drawgraph(id)


context.closepath()//關閉路徑


context.fill()//填充顏色


context.stroke()


}script


>


head


>


<


body 


onload


="drawgraph('canvasid')"


>


<


canvas 


id="canvasid"


width


="300"


height


="400"


>


canvas


>


body


>


html


>
繪製貝塞爾曲線

效果圖如下：

**如下：

doctype html


>


<


html


>


<


head 


lang


="en"


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


script


>


function


drawgraph(id)


context.closepath()


context.fill()


context.stroke()


}script


>


head


>


<


body 


onload


="drawgraph('canvasid')"


>


<


canvas 


id="canvasid"


width


="300"


height


="400"


>


canvas


>


body


>


html


>
關於了解的html5的基本知識點就到這裡了，畢竟專案中沒有去使用，出於個人閒來無事有個大體了解.並且都很基本，其實這些基本的知識點感覺沒必要花費這麼多精力去關注，這個時間個人感覺花的太多，完全可以找個小demo去研究，這樣驅動的去學習效果會更好，先到這裡了，準備投入到下一階段其他開發知識點的學習中.

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

html5學習筆記

html5 1 文件宣告dtd 設定文件型別 使得瀏覽器按照標準模式 w3c標準 渲染網頁 否則瀏覽器按照自定義的怪異模式渲染網頁 2 結構標籤 本質上都是div標籤，但是有意義，3 canvas 凡是路徑圖形，開始畫之前要beginpath 畫完要closepath 定義縮寫 the prc wa...