CanvasRenderingContext2D提供了fillText方法,使我们可以在Canvas上绘制文字。可以通过CanvasRenderingContext2D的font属性来设置文字的fontSize、是否加粗及字体属性等。
在这个实验中,尝试在Canvas中绘制一个具有立体感文字特效。看下面的代码:
<canvas id="myCanvas" width="480" height="300" style="border: 1px solid #c3c3c3;">
你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
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("感",