<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 渲染3D立体文字实例</title>
<script type="text/javascript">
window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.font="40pt 微软雅黑";
context.fillStyle="black";
context.textAlign="center";
context.textBaseline="middle";
draw3dText(context,"www.naokr.com",canvas.width/2,120,5);
}
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.shadowOffsetX=textDepth+2;
context.shadowOffsetY=textDepth+2;
context.fillText(text,x-n,y-n);
}
</script>
</head>
<body style="margin:100px 10px;">
<canvas id="myCanvas" width="600" height="250" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
实例来自网络。传送门：http://demo.cnmsdn.com/demo41.html