canvas中可以用fillText繪出文字例如lthtmlltbody ltcanvasid=quotmyCanvasquotwidth=quot300quotheight=quot150quotstyle=quotborder1pxsolid#d3d3d3quot YourbrowserdoesnotsupporttheHTML5canvastagltcanvas ltscript varc=quotmyCanvasquotvarctx=cgetContextquot2dquot=quot20pxGeorgiaquotquotHelloWorld！quot，10，50。

1 將Font Awesome 的字體文件拷貝到服務(wù)器的字體目錄里面 2 設(shè)置Canvas 的字體， ctxfont=quot12px fontawesomequot3 調(diào)用Canvas API ctxfillTexttext，x，y 這里text 就是 圖標(biāo)的Unicode結(jié)果顯示的就是Unicode代表的圖標(biāo)了其他相關(guān)的技巧 1 如果沒有權(quán)限或者不想拷貝字體到服務(wù)器的字體目錄。

估計你剛學(xué)javascript吧，return不能用在“外部”return需要在“函數(shù)內(nèi)部”function test var canvas = documentquerySelector#39canvas#39 if ！canvas alert#39瀏覽器不支持#39 consolelogcanvastestlthtmlltheadltheadltbodyltcanvas id=quotmyCanvasquotltcanvasltscri。

HTML5還沒那么多API這個你要用其他語言來解析，然后再載入HTML5呈現(xiàn)直接HTML5是沒辦法的。

canvas有一個font屬性，用font屬性先設(shè)定好文字的字體，加粗，傾斜，字號，然后用fillText 或者strokeText插入文字就好了，給個例子lt！DOCTYPE HTML lthtml lthead ltscript type=quottextjavascriptquot windowonload=function var content = documentgetElementByIdquotcanvasquotvar cxt = content。

#39body#39append#39不支持canvas#39 將上述代碼粘貼到indexhtml文件的適當(dāng)位置這里使用了jQuery的`$#39body#39append`方法來向頁面添加相應(yīng)的文本信息如果瀏覽器支持HTML5 Canvas，頁面將顯示“支持canvas”若不支持，則顯示“不支持canvas”這種簡單直接的方法可以幫助開發(fā)者快速了解瀏覽器。

1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltbody標(biāo)簽中，輸入js代碼try documentcreateElementquotcanvasquotgetContextquot2dquot#39body#39append#39支持canvas#39 catch e #39body#39append#39不支持canvas#39 3瀏覽器運行indexhtml頁面，此時。

首先save是保存當(dāng)前狀態(tài)，restore是返回上一次保存的狀態(tài)你畫出quot文字1quot，后旋轉(zhuǎn)，后返回相當(dāng)于沒有旋轉(zhuǎn)，最后才畫quot文字2quot，所以兩次文字都不旋轉(zhuǎn)其次rotate的參數(shù)不是角度制，而是弧度制MahtPI相當(dāng)于180度所以要旋轉(zhuǎn)30角度必須這樣寫crotateMathPI6再次旋轉(zhuǎn)之后的方向。

本文實例講述了js+html5實現(xiàn)canvas繪制鏤空字體文本的方法分享給大家供大家參考具體實現(xiàn)方法如下lt！DOCTYPE html lthtml ltbody ltcanvas id=quotmyCanvasquotwidth=quot200quotheight=quot100quotstyle=quotborder1px solid d3d3d3quot Your browser does not support the HTML5 canvas tagltcanvas ltscript。

1 關(guān)于toDataURLtype， ratio函數(shù)，參數(shù)type在imagepng，imagejpeg，imagesvg+xml等 MIME類型中選擇可以不填，默認(rèn)是imagepng如果是type = “imagejpeg”，可以有第二個參數(shù)，如果第二個參數(shù)ratio的值在01之間，則表示JPEG的質(zhì)量等級，否則使用瀏覽器內(nèi)置默認(rèn)質(zhì)量等級2 關(guān)于getImage。

html5中的canvas本身的API是不存在圖層概念的要想實現(xiàn)實現(xiàn)多圖層功能，必須要使用多個canvas對象，不過這些canvas對象，是在內(nèi)存中的，而不是在html的元素樹中每個canvas維持一個圖層就可以，然后主canvas是負(fù)責(zé)顯示最后的合成的效果js動態(tài)創(chuàng)建canvas對象如下var layer1=documentcreateElement#39canvas#39。

如果是用IE的話，只有IE9及以上才支持可以使用傲游3進(jìn)行瀏覽。

多個 canvas 可以重疊，分別用 styledisplay = #39#39 來隱藏，只留一個顯示HTML5 canvas 是透明的多個重疊的 canvas 可以同時顯示，實現(xiàn)多層 layer還可以控制涂色的透明度，產(chǎn)生半透明覆蓋效果我曾用這種方式制造出玻璃效果，看上去很美。

擦除canvas畫布有兩個方法可以使用clearRect方法 重新設(shè)置高寬度 示例* 本示例使用jQuery描述 *var canvas = $#39#myCanvas#39 選擇要擦除的canvas元素var context = canvasget0getContext#392d#39 獲取canvas上下文第一種方法擦除clearRect方法contextclearRect0， 0。

不光繪制圖片，在高分屏下，繪制文字和線條都會出現(xiàn)模糊的現(xiàn)象，GitHub上有一個hidpicanvaspolyfill可以很好的解決這個問題，但是沒有對圖片進(jìn)行處理如果你了解了原因，解決這個問題也很容易\x0d\x0a首先，引入上方這個polyfill\x0d\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例。

該對象提供了用于在畫布上繪圖的方法和屬性本手冊提供完整的 getContextquot2dquot 對象屬性和方法，可用于在畫布上繪制文本線條矩形圓形等等正如上面所說，你需要制作無數(shù)的規(guī)則圖形組合到一起變成不規(guī)則圖形操作可以說是相當(dāng)復(fù)雜建議你可以用HYPE3實驗下，如果你想做HTML5動畫的話。

它可以用來制作照片集或者制作簡單也不是那么簡單的動畫，甚至可以進(jìn)行實時視頻處理和渲染在html中，canvas標(biāo)簽用來定義圖形，比如圖表和其他圖像，必須使用腳本來繪制圖形，例如在畫布上畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字1什么是canvas？HTML5canvas元素用于圖形的繪制，通過腳本。