如何分析HTML5 Canvas標(biāo)簽及基本使用

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

HTML 5 標(biāo)簽定義和用法

　　標(biāo)簽定義圖形，比如圖表和其他圖像。

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

　　實例

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

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

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

　　ctx.fillStyle='#FF0000';

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

　　< canvas>定義圖形 基于狀態(tài)進(jìn)行繪制的

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

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

　　canvas.getContext（"2d"）; //返回繪制的環(huán)境

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

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

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

　　context.lineWidth=3 //設(shè)置線條的寬度

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

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

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

　　context.closePath（）; //用在路徑結(jié)束，

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

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

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

　　//繪制弧和圓

　　context.arc（

　　centetx,centery,radius, //圓心坐標(biāo)及半徑

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

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

　　默認(rèn)：順時針&hellip;&hellip;true以逆時針繪制

　?。?/p>

　　//調(diào)用arc函數(shù)

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

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

　　//全局變量

　　WINDOW_WIDTH=1024; WINDOW_HEIGHT=768;

　　//調(diào)用全局變量

　　canvas.width=WINDOW_WIDTH;

　　//render（）函數(shù) render（context）;

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

html有什么特點

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

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