繪制字體時可以使用fillText方法或者strokeText方法。
fillText方法用填充的方式來繪制字符串
context.fillText (text, x,y,[maxwidth]);
strokeText方法用輪廓的方式來繪制字符串.
context.strokeText (text, x,y,[maxwidth]);
第一個參數text表示要繪制的文字，
第二個參數x表示要繪制的文字的起點橫坐標，
第三個參數y表示要繪制的文字的起點縱坐標，
第四個參數maxwidth 為可選參數，表示顯示文字的時候最大的寬度，可以防止文字溢出
在body的屬性里面，使用onload="draw('canvas' )“語句，調用腳本文件中的draw函數進行圖形繪畫
畫布的創建方法：指定 id ， width（畫布寬度）， height（畫布高度）
創建一個畫布，長度為800，高度為300
1 <body onload="draw('canvas')">
2 <canvas id="canvas" width="800" height="300" ></canvas>
3 </body>
引入一個名為canvas的is腳本，js腳本的語言編碼是utf-8
1 function draw(id){ 2 var canvas = document.getElementById(id); 3 var context = canvas.getContext('2d'); //獲取對應的2D對象(畫筆)
4 context.fillStyle = 'green'; //設置填充的背景顏色
5 context.fillRect(0,0,800,300); //繪制 800*300 像素的已填充矩形：
6 context.fillStyle = '#fff'; 7 context.strokeStyle = '#fff'; //設置筆觸的顏色
8 context.font = "bold 40px '字體','字體','微軟雅黑','宋體'"; //設置字體
9 context.textBaseline = 'hanging'; //在繪制文本時使用的當前文本基線
10 context.fillText('歡迎收看' ,10 ,40); //設置文本內容
11 context.fillText('《canvas輕松入門》',40,110); 12 context.fillText('視頻教程',580,180); 13 }
context.textBaseline = 'hanging';
屬性值可以是top（頂部對齊）
hanging（懸掛） middle（中間對齊） bottom（底部對齊） alphabetic是默認值