运行效果：

<!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. android 加密手机完毕后待机两分钟出现有频率的杂音

    这个音效是code里面主动加的,是为了提醒end user输入PIN的一个提示音,也标志着加密手机动作的完毕. 详细位置是在alps\packages\apps\Settings\src\com\an ...

  2. shell脚本 加密备份MySQL数据库

    1.加密备份为.bak文件(实际只是个.zip文件) #!/bin/bash # $:IP地址 # $:用户名 # $:数据库密码 # $:数据库名 # $:加密密码 # $:备份文件名 mysqld ...

  3. 从Linux内核升级的必要性说开去

    Linux内核更新超级频繁,可是有必要时刻升级吗?个人感觉没有必要,可是你要时刻关注新特性列表,然后把自己的内核升级到离最新版本号差一两个月公布的版本号而不是最新版本号.以保证稳定性,由于一两个月的时 ...

  4. 复制class文件到as中出现非法字符，须要class，interface货enum

    问题如题,出现此情况是在导入eclipse项目到Android Studio出现这种错误, 非法字符: '\ufeff' 解决方式|错误: 须要class, interface或enum,查阅后了解到 ...

  5. Python爬虫开发【第1篇】【代理】

    1.简单的自定义opener() import urllib2 # 构建一个HTTPHandler 处理器对象,支持处理HTTP请求 http_handler = urllib2.HTTPHandle ...

  6. sql compare options

    sql compare project's options Add object existence checks Use DROP and CREATE instead of ALTER Ignor ...

  7. Python基础第二天

    一.内容 二.练习 练习1 题目:已知msg='hello knight 666'编写for循环,利用索引遍历出每一个字符 图示: 代码: msg = 'hello knight 666' msg_l ...

  8. CMake使用总结

    总结CMake的常用命令,并介绍有用的CMake资源. CMake意为cross-platform make,可用于管理c/c++工程.CMake解析配置文件CMakeLists.txt生成Makef ...

  9. vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  10. 栗染-Error parsing D:\sdkforas\android-sdk-windows\system-images\android-24\android-wear\x86\devices.xml

    每次打开android virtual device manager 下面都会出现这样的问题 解决办法: 打开自己安装的sdk目录,找到/tools/lib/devices.xml去替换图中路径里面的 ...