1.8 绘制带阴影的3D文本

优质

小牛编辑

130浏览

2023-12-01

如果对2D文本不满意，你可能考虑绘制3D文本。尽管HTML5的画布API没有提供直接绘制3D文本的方法，我们当然可以使用现有的API，自定义一个draw3dText()方法，来绘制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属性，在文本下面添加一个软阴影。正如在我们在下一节将要看到的，这些属性并非仅限于文本，它们也可以应用于子路径、路径和形状。