上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
实验5 立体文字
简介
CanvasRenderingContext2D提供了fillText方法，使我们可以在Canvas上绘制文字。可以通过CanvasRenderingContext2D的font属性来设置文字的fontSize、是否加粗及字体属性等。
在这个实验中，尝试在Canvas中绘制一个具有立体感的文字特效。看下面的代码：
<canvasid="myCanvas"width="480"height="300"style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
function draw() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#0f0";
var fontSize=90;
cxt.font="bold 90px Arial";
cxt.fillText("立", 190, 90);
cxt.globalAlpha=0.7; \注：以下为“立”右边的文字\
cxt.font="bold 70px Arial";
cxt.fillText("体", 260, 90);
cxt.globalAlpha=0.6;
cxt.font="bold 50px Arial";
cxt.fillText("感", 310, 90);
cxt.globalAlpha=0.5;
cxt.font="bold 30px Arial";
cxt.fillText("文", 350, 90);
cxt.globalAlpha=0.4;
cxt.font="bold 20px Arial";
cxt.fillText("字", 370, 90);
cxt.globalAlpha=0.7; \注：以下为“立”左边的文字\
cxt.font="bold 70px Arial";
cxt.fillText("体", 145, 90);
cxt.globalAlpha=0.6;
cxt.font="bold 50px Arial";
cxt.fillText("感", 110, 90);
cxt.globalAlpha=0.5;
cxt.font="bold 30px Arial";
cxt.fillText("文", 90, 90);
cxt.globalAlpha=0.4;
cxt.font="bold 20px Arial";
cxt.fillText("字", 80, 90);
}
draw();
</script>
通过设置字体的大小、透明度来实现立体层次感。其中CanvasRenderingContext2D的globalAlpha属性用来设置透明度。其值为0到1，当CanvasRenderingContext2D. globalAlpha为0时完全透明，当CanvasRenderingContext2D. globalAlpha为1时，完全不透明。
最终的效果如图1-19所示。
图1-19 立体效果