我們先來看具體的示例

 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d  context.font = normal 18pt 楷體  context.fillText( Hello HTML Canvas World! , 60, 200); /script  /head  body onload= draw() >
說明：
下面的代碼是獲取canvas對象并獲取上下文。
var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d 
下面是繪制字符的代碼。指定要在font屬性中繪制的字符的字體信息。使用fillText（）方法在畫布上繪制一個字符串。作為第一個參數繪制的字符串，繪圖開始的X坐標和Y坐標被賦予第二個和第三個參數。
context.font = normal 18pt 楷體 context.fillText( Hello HTML Canvas World! , 60, 200);
運行結果
使用Web瀏覽器顯示上述HTML文件。獲得下圖的顯示結果。
接下來我們來看如何更改文字的顏色
代碼如下
 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d  context.font = normal 18pt 楷體  context.fillStyle = red  context.fillText( 你好，PHP ！！！ , 60, 200); /script  /head  body onload= draw() >
說明：
更改文本顏色，需要設置fillStyle屬性為文本顏色。
 context.font = normal 18pt 楷體  context.fillStyle = red  context.fillText( 你好，PHP ！！！ , 60, 200);
運行結果：
使用Web瀏覽器顯示上述HTML文件。將獲得如下圖所示的效果，已繪制了紅色的字體。
以上就是如何使用HTML5 canvas繪制文字的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。