Canvas繪製文本
Context上下文物件的fillText(string, x, y)方法是用來繪製文本,它的三個(gè)參數(shù)分別為文本內(nèi)容、起點(diǎn)的x座標(biāo)、y座標(biāo)。使用前,需先用font設(shè)定字體、大小、樣式(寫法類似與CSS的font屬性)。與此類似的還有strokeText方法,用來加入空心字。另外注意一點(diǎn):fillText方法不支援文字?jǐn)嘈校此形淖殖霈F(xiàn)在一行內(nèi)。所以,如果要產(chǎn)生多行文本,只有呼叫多次fillText方法。
程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>huatu</title> <body> <canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通過id獲得當(dāng)前的Canvas對(duì)象 var canvasDom = document.getElementById("demoCanvas"); //通過Canvas Dom對(duì)象獲取Context的對(duì)象 var context = canvasDom.getContext("2d"); context.moveTo(200,200); // 設(shè)置字體 context.font = "Bold 50px Arial"; // 設(shè)置對(duì)齊方式 context.textAlign = "left"; // 設(shè)置填充顏色 context.fillStyle = "#005600"; // 設(shè)置字體內(nèi)容,以及在畫布上的位置 context.fillText("PHP中文網(wǎng)!", 10, 50); // 繪制空心字 context.strokeText("www.miracleart.cn!", 10, 100); </script> </body> </html>