HTML5 Canvas实战
1.8 绘制带阴影的3D文本
阅读(

路径和文本

绘制直线

绘制圆弧

绘制二次曲线

绘制贝塞尔曲线

绘制锯齿线

绘制螺旋线

处理文本

绘制带阴影的3D文本

如果对2D文本不满意,你可能考虑绘制3D文本。尽管HTML5的画布API没有提供直接绘制3D文本的方法,我们当然可以使用现有的API,自定义一个draw3dText()方法,来绘制3D文本。

绘制带阴影的3D文本
图1-12 绘制带阴影的3D文本

按照以下步骤绘制3D文本:

1. 设置画布上下文和文本样式:

window.onload  = function(){
  canvas  = document.getElementById("myCanvas"); 
  context  = canvas.getContext("2d");
  context.font  = "40pt Calibri";
  context.fillStyle  = "black";

2. 在水平和垂直方向上对齐文本,并绘制到画布:


  context.textAlign  = "center";  //水平居中
  context.textBaseline  = "middle";  //垂直居中
  draw3dText(context, "Hello  3D World!", canvas.width  /  2,  120, 5);
};

3. 定义draw3dText()函数,该函数绘制多层文本并添加阴影:

function draw3dText(context, text, x, y, textDepth) {
  var n;
  //绘制底层
  for  (n  =  0; n  < textDepth; n++)  {
    context.fillText(text, x  - n, y  - n);
  }
  // 绘制带有阴影的顶层,并覆盖在底层之上
  context.fillStyle   = "#5E97FF";
  context.shadowColor = "black"; 
  context.shadowBlur  =  10;
  context.shadowOffsetY  = textDepth  +  2;
  context.fillText(text, x  - n, y  - n);
}

4. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要在HTML5的画布中绘制3D文本,可以通过相同文本的层层叠加,来创造立体感。本节,我们设置的文本深度为5,也就是说,我们自定义的draw3dText()方法,绘制5个"Hello 3D World!",一个叠加在另一个上。我们把每层的颜色都设置为黑色,在文本下方创造一种黑暗感。

接下来,我们添加一个彩色的顶层来勾勒一个朝前的表面。最后,通过设置画布上下文对象的shadowColor, shadowBlur, shadowOffsetX和shadowOffsetY属性,在文本下面添加一个软阴影。正如在我们在下一节将要看到的,这些属性并非仅限于文本,它们也可以应用于子路径、路径和形状。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验