运行效果：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id="drawing" width="" height="">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('莫', , );

            context.globalAlpha = 0.7;

            context.font = 'bold 80px Arial';

            context.fillText('欺', , );

            context.globalAlpha = 0.6;

            context.font = 'bold 70px Arial';

            context.fillText('欺', , );

            context.globalAlpha = 0.6;

            context.font = 'bold 60px Arial';

            context.fillText('少', , );

            context.globalAlpha = 0.5;

            context.font = 'bold 60px Arial';

            context.fillText('少', , );

            context.globalAlpha = 0.5;

            context.font = 'bold 40px Arial';

            context.fillText('年', , );

            context.globalAlpha = 0.4;

            context.font = 'bold 40px Arial';

            context.fillText('年', , );

            context.globalAlpha = 0.4;

            context.font = 'bold 20px Arial';

            context.fillText('穷', , );

            context.globalAlpha = 0.3;

            context.font = 'bold 20px Arial';

            context.fillText('穷', , );

            context.globalAlpha = 0.3;

        }

    </script>

</body>

</html>

canvas一周一练 -- canvas绘制立体文字（2）的更多相关文章

  1. canvas一周一练 -- canvas绘制中国银行标志（4）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  8. 前端使用canvas绘制立体三角形

    前端绘制立体效果的三角形的demo 在移动端使用时,需要自适应屏幕.canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%. 如果 ...

  9. H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

    摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...

随机推荐

  1. IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02：Web管控平台后台架构 NetCore入门篇：（十一）NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题

    IT咨询顾问:一次吐血的项目救火   年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...

  2. Python开发【第*篇】【模块】

    模块分为三种: 自定义模块 第三方模块 内置模块 1.模块导入 import model from model.xx.xx import xx from model.xx.xx import xx a ...

  3. libsqlite3.dylib与libsqlite3.0.dylib的差别

    在我们加入数据库框架时,在搜索框中输入sqlitekeyword,以下列表区会显示libsqlite3.dylib,libsqlite3.0.dylib. 此时我们选择libsqlite3.0.dyl ...

  4. lamdba匿名函数 sored()函数 filter()函数 map函数() 递归函数

    帅爆太阳的男人 1,lamdba匿名函数:为了解决一下简单的需求而设计的一句话函数,语法: 函数名 = lambda 参数: 返回值 def func(n): return n*n print(fun ...

  5. BestCoder Round #56/hdu5463 Clarke and minecraft 水题

    Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...

  6. 牛了个逼，phpstorm查询技巧

    两次shift,会弹出最近常用的文件. 可以查询按照方法名,类名,文件名等进行查询. Ctrl+E可以查看最近使用的文件. Ctrl+Shift+E可以查看最近修改的文件. Ctrl+shift+N ...

  7. 【Codevs3151】交通管制I

    Position: http://codevs.cn/problem/3151/ List [Codevs3151]交通管制I List Description Input Output Sample ...

  8. 美国诚实签经验——必带材料：护照，证件照，DS160确认页，面试预约确认页，+境外照片

    Step3. 准备签证材料这些材料如果准备,请一定围绕着你的DS160表格,不可说谎,但可适当修饰,辅佐它,烘托它,营造出一种——你绝无可能去不复返,绝无可能制造麻烦,绝无想占人便宜的意思,并且随时可 ...

  9. UVaLive 6680 Join the Conversation (DP)

    题意:给出n条发言,让你求最大的交流长度并输出标记顺序. 析:这个题要知道的是,前面的人是不能at后面的人,只能由后面的人at前面的,那就简单了,我们只要更新每一层的最大值就好,并不会影响到其他层. ...

  10. va_start和va_end使用详解（转载）

    转自:http://www.cnblogs.com/hanyonglu/archive/2011/05/07/2039916.html 本文主要介绍va_start和va_end的使用及原理. 在以前 ...