Methodi ya fillText() ya HTML canvas

Kitabu cha mifano cha HTML5 Canvas

Mifano na matumizi

fillText() Methodi ya kufaisha matukio kwenye rafiki ya picha. Rangi ya kwa mvumbi ya matukio ni mwezi.

Mafanikio:Tumia font kwa kualikwa na fonti na ukubwa wa fonti, na tumia fillStyle Mafanikio inayotumika kwenye matukio ya jina kwa rangi au mawingu mengine.

Mifano

Tumia methodi ya fillText(), kuandika matukio "Hello world!" na "codew3c.com" kwenye rafiki ya picha:

Interneti wako hauku kusaidia chilango cha HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Kujenga mawingu
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

亲自试一试

语法

context.fillText(text,x,y,maxWidth);

参数值

参数 描述
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 元素。

Kitabu cha mifano cha HTML5 Canvas