如何分析HTML5 Canvas標簽及基本使用

這篇文章給大家介紹如何分析HTML5 Canvas標簽及基本使用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

HTML 5 標簽定義和用法

　　標簽定義圖形，比如圖表和其他圖像。

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

　　實例

　　如何通過 canvas 元素來顯示一個紅色的矩形：

　　var canvas=document.getElementById（'myCanvas'）;

　　var ctx=canvas.getContext（'2d'）;

　　ctx.fillStyle='#FF0000';

　　ctx.fillRect（0,0,80,100）;

　　< canvas>定義圖形 基于狀態進行繪制的

　　大多數 Canvas 繪圖 API 都沒有定義在 < canvas> 元素本身上，而是定義在通過畫布的 getContext（） 方法獲得的一個“繪圖環境”對象上

　　canvas.width canvas.height //指定canvas的寬高

　　canvas.getContext（"2d"）; //返回繪制的環境

　　context.moveTo（10,10） //從（10，10）開始畫

　　context.lineTo（100,100） //從（10，10）開始畫，畫到（100，100）

　　context.stroke（） //開始繪制（線條）

　　context.lineWidth=3 //設置線條的寬度

　　context.strokeStyle="#f00" 設置線條的顏色 stroke筆畫的意思

　　context.fillStyle="rgb（255,0,0）"；context.fill（） //著色，填充的顏色（顏色塊）

　　context.beginPath（）; //定義一個新的路徑

　　context.closePath（）; //用在路徑結束，

　　如果繪制的路徑不是封閉的則會自動封閉起來，不寫closrPath則不會封閉

　　//從坐標（20，30）開始，畫一個64*36的矩形

　　context.fillRect（20,30,64,36）; //rect矩形

　　//繪制弧和圓

　　context.arc（

　　centetx,centery,radius, //圓心坐標及半徑

　　startingAngle,enddingAngle, //從哪個弧度值開始，結束于哪個弧度值

　　anticlockwise=false //可選，表示以順時針開始繪制還是逆時針。

　　默認：順時針&hellip;&hellip;true以逆時針繪制

　　）

　　//調用arc函數

　　//以（300,300）為圓心，200為半徑畫弧，從0畫到1.5個PI

　　context.arc（300,300,200,0,1.5*Math.PI）

　　//全局變量

　　WINDOW_WIDTH=1024; WINDOW_HEIGHT=768;

　　//調用全局變量

　　canvas.width=WINDOW_WIDTH;

　　//render（）函數 render（context）;

　　renderDigit（0,0,parseInt（hours/10），ctx）

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

關于如何分析HTML5 Canvas標簽及基本使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。