- HTML5實驗室
- 張磊編著
- 307字
- 2019-01-09 15:53:50
實驗5 立體文字
簡介
CanvasRenderingContext2D提供了fillText方法，使我們可以在Canvas上繪制文字。可以通過CanvasRenderingContext2D的font屬性來設置文字的fontSize、是否加粗及字體屬性等。
在這個實驗中，嘗試在Canvas中繪制一個具有立體感的文字特效?？聪旅娴拇a：
<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 立體效果