码迷,mamicode.com
首页 > 其他好文 > 详细

canvas一周一练 -- canvas绘制立体文字(7)

时间:2017-07-18 13:32:46      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:raw   doctype   drawing   var   ext   can   lin   style   blog   

运行效果:

技术分享

<!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绘制立体文字(7)

标签:raw   doctype   drawing   var   ext   can   lin   style   blog   

原文地址:http://www.cnblogs.com/merryZhang/p/7193457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!