Canvas文字操作

2021-07-09 09:22:08 字數 3128 閱讀 6819

canvas的繪圖環境提供三個方法如:

繪製填充文字:filltext();

繪製描邊文字:stroketext();

繪製文字並返回乙個物件:measure();

measure()方法返回的物件中包含乙個width屬性,該屬性表達繪製的文字所佔據的寬度;

canvas繪圖環境提供三個屬性如:設定稍後繪圖環境所繪製文字的字型:font;

文字水平方向定位:textalign;

文字垂直方向定位:textbaseline;

textbaseline屬性包含的值:

topbottom

middle

alphabetic

ideographic

hanging

textbaseline屬性的預設值alphabetic;

alphabetic:該值用於繪製由基於拉丁字母的語言所組成的字串。

ideographic:該用於繪製日文或中文字元;

hanging:該值用於繪製各種印度語字串;

top、bottom與middle這三個值與特定的語言不相關,它們代表文字周圍的邊界框之內的某個位置,這個邊界框也叫做「字元方框」(em square)

// 給文字填充漸變效果

var gradient = context.createlineargradient(0, 0,

canvas.width, canvas.height);

gradient.addcolorstop(0, "red");

gradient.addcolorstop(1, "blue");

context.font = "60px arial";

context.textalign = "left";

context.textbaseline = "middle";

context.fillstyle = gradient;

context.filltext("canvas", 60, 60);

context.strokestyle = "red";

context.beginpath();

context.moveto(0.5, 60);

context.lineto(canvas.width+0.5, 60);

context.stroke();

注意:在呼叫measuretext方法之前先設定好字形

在使用measuretext方法時,常見的錯誤就是在呼叫完該方法之後,才去設定字形。請注意,measuertext方法是根據當前的字形來計算字串的寬度,因此,如果你在呼叫measuretext方法之後去改變字形,那麼該方法返回的寬度並不能反映出以那種字形來度量的實際文字寬度

在圓弧周圍繪製文字

// 圓弧的屬性,圓弧的座標及圓弧的半徑//

var circle =

function drawcirculartext(string, startangle, endangle)

context.restore();}

drawcirculartext("canvas's hello word canvas's hello word", math.pi*2, math.pi / 8);

Canvas文字渲染

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

Canvas 繪製文字

filltext text,x,y maxwidth 填充文字 stroketext text,x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設,文字對齊界線開始的地方 左對齊指本地從左向右,右對齊指本地從右向左 ...

Canvas文字渲染

font屬性可以接收像css裡面font屬性一樣的字串 粗體 40px 字型 context.font bold 40px arial param string 想要書寫的字串 param x 字串的位置x座標 param y 字串的位置y座標 param maxlen 可選引數,表示繪製這段文字所...