canvas一周一练 -- canvas绘制立体文字
Posted 张不丢
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas一周一练 -- canvas绘制立体文字相关的知识，希望对你有一定的参考价值。
运行效果：
<!DOCTYPE html> <html> <head> </head> <body> <canvas id="drawing" width="800" height="600">A drawing of someing!</canvas> <script type="text/javascript"> var drawing = document.getElementById(\'drawing\'); if(drawing.getContext) { //绘制立体文字 var context = drawing.getContext(\'2d\'); context.fillStyle = \'Purple\'; context.textAlign = \'center\'; context.textBaseline = \'middle\'; context.font = \'bold 100px Arial\'; context.fillText(\'莫\', 290, 90); context.globalAlpha = 0.7; context.font = \'bold 80px Arial\'; context.fillText(\'欺\', 380, 90); context.globalAlpha = 0.6; context.font = \'bold 70px Arial\'; context.fillText(\'欺\', 205, 90); context.globalAlpha = 0.6; context.font = \'bold 60px Arial\'; context.fillText(\'少\', 450, 90); context.globalAlpha = 0.5; context.font = \'bold 60px Arial\'; context.fillText(\'少\', 140, 90); context.globalAlpha = 0.5; context.font = \'bold 40px Arial\'; context.fillText(\'年\', 500, 90); context.globalAlpha = 0.4; context.font = \'bold 40px Arial\'; context.fillText(\'年\', 95, 90); context.globalAlpha = 0.4; context.font = \'bold 20px Arial\'; context.fillText(\'穷\', 530, 90); context.globalAlpha = 0.3; context.font = \'bold 20px Arial\'; context.fillText(\'穷\', 65, 90); context.globalAlpha = 0.3; } </script> </body> </html>
以上是关于canvas一周一练 -- canvas绘制立体文字的主要内容，如果未能解决你的问题，请参考以下文章