<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas繪制文字</title>
<script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
function draw(id){
var canvas = document.getElementById(id);//獲得canvas對象
var context = canvas.getContext('2d');//獲得上下文，並設置成2d
context.fillStyle = "green";//設置畫布大小的矩形顏色
context.fillRect(0,0,800,300);//繪制畫布大小的矩形
context.fillStyle = "white";//設置文字的填充色
context.strokeStyle = "white";//設置文字邊框的顏色
context.font = "bold 40px '華文行楷','微軟雅黑'";//設置字體粗細，大小，樣式【可多選】。
//文字垂直對齊方式，默認值是alphabetic
// Bottom Alphabetic
//—————————————————Middle——————————————————————————————
//Top Hanging
//context.textBaseline = 'alphabetic';
//屬性值可以是top（頂部對齊）、hanging（懸掛）、middle（中間對齊）、bottom（底部對齊）、alphabetic是默認值。
context.textBaseline = 'hanging';
//設置文字水平對齊方式，默認值是start
// |
// |
// |start
// end|
// |left
// center
// right|
// |
// |
//context.textAlign = 'start';
//屬性值可以設置為：start、end、left、right、center
context.fillText("歡迎光臨華帥博客",30,70);
context.strokeText("HTML5+CSS3實戰",200,130);
context.fillText("新手入門，大神見諒。",380,190);
context.fillText('123456789987654321123456789987654321123456789987654321123456789987654321123456789987654321',0,260,800)
}
繪制字體時可以使用的fillText方法或者StrokeText方法。
fillText方法用填充的方式來繪制字符串
context.fillText(text,x,y,[maxwidth]);
strokeText方法用輪廓的方式來繪制字符串
context.strokeText(text,x,y,[width]);
第一個參數text表示要繪制的文字，第二個參數x表示要繪制的起點橫坐標，第三個參數y表示要繪制的文字的起點縱坐標，第四個參數maxwidth為可選參數，表示顯示文字時最大的寬度，可以防止文字溢出。