canvas繪製文本

canvas繪製文本

1. 屬性和方法

   font = value                設置字體
   textAlign = value           設置字體對齊方式 start, end, left, right, center
   textBaseline = value        設置基線對齊方式 top, hanging, middle, alphabetic, ideographic, bottom
   direction = value           設置文字書寫方向 ltr, rtl, inherit
   
   fillText(text, x, y [, maxWidth])       實心文字
   strokeText(text, x, y [, maxWidth])     空心文字

2. 繪製文字

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   ctx.font = '48px serif';
   ctx.textBaseline = 'hanging';
   ctx.fillText('Hello world', 10, 50);
   ctx.strokeText('Hello world', 10, 100);

3. 獲取文字寬度

   var text = ctx.measureText('Hello'); 
   console.log(text.width);