运行效果：

<!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. java 数据结构. 源代码阅读

    Collections工具类里的 Collections.synchronizedList public static <T> List<T> synchronizedList ...

  2. 蓝桥杯 地宫寻宝 带缓存的DFS

      历届试题 地宫取宝   时间限制:1.0s   内存限制:256.0MB      问题描写叙述 X 国王有一个地宫宝库. 是 n x m 个格子的矩阵. 每一个格子放一件宝贝. 每一个宝贝贴着价 ...

  3. CI 知识 ：Git介绍及常用操作

    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...

  4. [Python]基于权重的随机数2种实现方式

    问题: 比如我们要选从不同省份选取一个号码.每一个省份的权重不一样,直接选随机数肯定是不行的了,就须要一个模型来解决问题. 简化成以下的问题: 字典的key代表是省份,value代表的是权重,我们如今 ...

  5. 自己动手写shell命令之ls -R1fF

    ls命令的R參数代表递归的列出全部子目录中的全部文件,1表示每一行仅仅显示一个文件或目录,f表示不排序即输出.F表示在每项的输出的最后依据其文件类型对应的加上*/=>@|字符.通过c语言实现ls ...

  6. ci url 控制 查询 通过路由 控制返回 视图的结果

    http://192.168.2.102/fastdatav/ChkUrl/daily/G8 http://192.168.2.102/fastdatav/ChkUrl/daily/ 放在 试图  控 ...

  7. SQL Server 运行计划操作符具体解释（1）——断言(Assert)

    前言: 非常多非常多地方对于语句的优化,一般比較靠谱的回复即使--把运行计划发出来看看.当然那些仅仅看语句就说怎样怎样改代码,我一直都是拒绝的,由于这样的算是纯蒙.依据本人经验,大量的性能问题单纯从语 ...

  8. XML解析方式汇总

    XML解析方式汇总 分类: XML2011-08-23 19:19 167人阅读 评论(0) 收藏 举报 xmlstringexceptionattributesclassiterator DOM解析 ...

  9. 关于redis、memcache、mongoDB的对比

    从以下几个维度,对 Redis.memcache.MongoDB 做了对比.1.性能都比较高,性能对我们来说应该都不是瓶颈.总体来讲,TPS 方面 redis 和 memcache 差不多,要大于 m ...

  10. 红米note怎么打开USB调试模式

    红米note到货后,打开USB调试模式是一些新手很棘手的问题,所以要手机助手成功识别红米note,你必须打开红米note的USB调试模式.在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的 ...