Canvas文字渲染

font屬性可以接收像css裡面font屬性一樣的字串 粗體 40px 字型

context.font = 『bold 40px arial』;

@param string [想要書寫的字串]

@param x [字串的位置x座標]

@param y [字串的位置y座標]

@param maxlen [可選引數，表示繪製這段文字所能使用的最寬的寬度]

context.filltext(string,x,y,[maxlen])

繪製一段文字，但是只有文字的輪廓，而沒有填充色

context.stroketext(string,x,y,[maxlen])

context.font = 'bold 40px arial';

context.fillstyle = '#058';
context.filltext('hello world',350,100);
context.stroketext('hello world',350,200)
/*** 加上maxlen屬性時，如果字串文字的寬度小於該值，則沒什麼改變
** 如果字串文字的寬度大於該值，設定該值後，會強行將每乙個字元的寬度減小，讓文字的總寬度為該值
*/context.filltext('hello world',350,300,50);
context.stroketext('hello world',350,400,50);
/*** 聯想
** 之前使用過來填充canvas畫布，這裡我們可以使用背景圖來填充文字
* italic(斜體字)
* oblique(傾斜字型)
*/context.font = 'bold 40px arial';
context.filltext('hello world',0,100);
context.font = 'italic bold 40px arial';
context.filltext('hello world',0,200);
context.font = 'oblique bold 40px arial';
context.filltext('hello world',0,300);
/*** font-variant:normal(default)
* small-caps(只有使用英文小寫字母才能看出來，以小型的大寫字母的形式顯示所有的小寫字母)
*/context.font = 'bold 40px arial';
context.filltext('canvas',250,100);
context.font = 'small-caps bold 40px arial';
context.filltext('canvas',250,200);
/*** font-weight:lighter(更細的屬性)
* normal (default)
* bold
* bolder(更粗)
* 100,200,300,400(normal)
* 500,600,700(bold)
* 800,900
* 大部分瀏覽器還沒有支援lighter和bolder這兩個屬性
*/context.font = 'small-caps bold 40px arial';
context.filltext('canvas',400,100);
context.font = 'small-caps 40px arial';
context.filltext('canvas',400,200);
/*** font-size:xx-small
* x-small
* medium
* large
* x-large
* xx-large
* 12px,13px...
* font-family:支援@font-face屬性
*/

* 水平對齊 針對指定的座標點而言

* context.textalign = left(以其實的x軸為左邊界進行繪製)

* center(以其實的x軸為中間的位置進行繪製)

* right(以其實的x軸為右邊界進行繪製)

*/context.fillstyle = '#058';

context.font = '40px arial';

context.textalign = 'left';

context.filltext('textalign = left',400,100);

context.textalign = 'center';

context.filltext('textalign = center',400,200);

context.textalign = 'right';

context.filltext('textalign = right',400,300);

//對比線

* 垂直對齊 針對指定的座標點而言

* context.textbaseline = top

* middle

* bottom

* alphabetic(default)–基於拉丁字母的語言所組成的字串來設計的垂直方向的基準線

* ideographic–基於漢子以及日本文字等方塊文字設計的垂直方向的基準線

* hanging–基於印度語的字串設計的垂直方向的基準線

** context.measuretext(string)會返回乙個物件，該物件中包含乙個width的屬性，

* 代表，string字串在canvas中渲染出來的字串的長度

** 那麼同樣的字串設定的font粗細，格式，字型等不同時 ，返回的長度也會不同

*/context.font = 'bold 40px arial';

context.fillstyle = '#058';

context.filltext('hello world',200,100);

var width = context.measuretext('hello world').width;

context.filltext('上面文字的寬度為'+width+'',200,200);

Canvas文字渲染

context.font 文字樣式 default 20px sans serif font包含 font style normal 預設 italic 斜體字 oblique 傾斜體字 font variant normal 預設 small caps 小型大寫字母代替小寫字母 font weig...

Canvas 文字渲染

文字渲染基礎 首先定義font屬性，然後用filltext 對文字進行渲染。context.font bold 40px arial context.filltext string,x,y,maxlen 其中，filltext 的第乙個引數是要書寫的字串，第 二 三個引數是書寫的位置，第四個引數是可...

canvas渲染模式

canvas有三種渲染模式可供選擇，分別是overlay,camera,world 其中overlay為覆蓋模式，即永遠最後渲染，覆蓋其他物體和ui。camera為相機模式，渲染順序依據相機。world為世界模式，並不因相機而改變，至於距離有關。實際工程中，我們會運用多個canvas，那麼各種模式下...