html5 fill,HTML canvas fillText()用法及代码示例

fillText()方法用于在画布上绘制填充的文本。文本的默认颜色是黑色。

用法:

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

参数：

text:此参数指定要在画布上写入的文本。

x:此参数指定从何处开始文本的x坐标。

y:此参数指定从何处结束文本的y坐标。

maxWidth:此参数指定文本允许的最大宽度。它是可选的。

范例1：

HTML canvas fillText() Method

GeeksforGeeks

HTML canvas fillText() Method

var doc_id = document.getElementById("GFG");

var context = doc_id.getContext("2d");

context.font = "bold 30px solid";

context.fillText("GeeksforGeeks", 180, 100);

// Create gradient

var grad = context.createLinearGradient(0, 0, doc_id.width, 0);

grad.addColorStop("0", "green");

grad.addColorStop("0.5", "white");

grad.addColorStop("1.0", "green");

// Fill with gradient

context.fillStyle = grad;

context.fillText("GeeksforGeeks", 180, 120);

输出：

支持的浏览器：下面列出了HTML canvas fillText()方法支持的浏览器：

谷歌浏览器

Internet Explorer 9.0

火狐浏览器

苹果浏览器

Opera