canvas fillText() 填充文本

2018-11-3 09:42| 作者: admin| 查看: 3224| 评论: 0|来自: 蚂蚁部落

fillText方法可以绘制具有填充的文本效果。

当然也可以绘制具有描边的文本效果,具体参阅canvas strokeText()一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.fillText(text,x,y,maxWidth);

参数解析:

(1).text:必需,要绘制的文本内容。

(2).x:必需,开始绘制文本的x轴坐标。

(3).y:必需,开始绘制文本的y轴坐标。

(4).maxWidth:可选,规定文本绘制区域的最大宽度,后面会有代码详细演示。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillText("蚂蚁部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094352ua3k17fp3173c8s1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码实现文本绘制功能,分析如下:

(1).fillText方法第一个参数规定了要绘制的文本是"蚂蚁部落"。

(2).第二个和第三个参数规定文本绘制的起始位置。

(3).通过font属性设置文本的字体相关样式。

(4).fillText方法的默认填充颜色是#000000。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillStyle="blue";
  ctx.fillText("蚂蚁部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094425p2wpwpa2aa8822sg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过fillStyle属性将文本的填充颜色设置为蓝色。

fillStyle属性值不仅仅是颜色,还可以是渐变对象或者图案模式。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
 
  ctx.font="30px Georgia";
  let gradient=ctx.createLinearGradient(0,0,canvas.width,0);
  gradient.addColorStop("0","magenta");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  ctx.fillStyle=gradient;
  ctx.fillText("softwhy.com",10,30);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094454a3mnanvm4htn3rnl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将文本的填充设置为渐变对象。

关于fillStyle属性可以参阅canvas fillStyle一章节。

fillText方法仅仅是实现文本的填充效果,如果要设置字体的相关样式可以使用如下属性:

(1).font属性可以参阅canvas font 属性一章节。

(2).textAlign属性可以参阅canvas textAlign 属性一章节。

(3).textBaseline属性可以参阅canvas textBaseline 属性一章节。

(4).direction属性可以参阅canvas direction 属性一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillStyle="blue";
  ctx.fillText("蚂蚁部落",10,50);
  ctx.fillText("蚂蚁部落",10,100,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094605dafc9rx9xrkxol9f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

方法的第四个参数用来规定文本绘制区域的宽度。

如果宽度超过文本总宽度,那么一切绘制正常。

如果小于文本的总宽度,那么字体会水平缩放或者配合使用更小号的字体。


鲜花

握手

雷人

路过

鸡蛋
返回顶部