HTML canvas(画布)fillText()方法

• 

  fillText()方法定义和用法

  fillText()方法在画布上绘制填充文本。文本的默认颜色为黑色。
  提示：使用font属性指定字体和字体大小，并使用fillStyle属性以另一种颜色/渐变呈现文本。

• 

  fillText()方法浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  fillText()方法语法

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

• 

  fillText()方法实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  ctx.font = "20px Georgia";
  ctx.fillText("Hello World!", 10, 50);
  
  ctx.font = "30px Verdana";
  // Create gradient
  var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
  gradient.addColorStop("0", "magenta");
  gradient.addColorStop("0.5", "blue");
  gradient.addColorStop("1.0", "red");
  // Fill with gradient
  ctx.fillStyle = gradient;
  ctx.fillText("Big smile!", 10, 90);
  

  尝试一下
• 

  fillText()方法参数值

  参数	描述
  text	指定将在画布上写入的文本
  x	开始绘制文本的x坐标(相对于画布)
  y	开始绘制文本的y坐标(相对于画布)
  maxWidth	可选的。文本允许的最大宽度，以像素为单位

• 

  fillText()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布