运行效果：

<!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. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  2. Nginx中配置vue，react项目地址

    如题 像以前在Nginx中配置域名解析的时候只需要在conf.d文件夹下添加对应的xx.conf文件(当然了你也可以在nginx.conf)下配置. 如果是以前的老项目只需要在配置文件中server内 ...

  3. 简单区分iphone和ipad的宏定义

    在公共头文件里作例如以下定义: #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) 使用时: if( IS_I ...

  4. 【bzoj3676】[Apio2014]回文串 —— 回文自动机的学习

    写题遇上一棘手的题,[Apio2014]回文串,一眼看过后缀数组+Manacher.然后就码码码...过是过了,然后看一下[Status],怎么慢这么多,不服..然后就搜了一下,发现一种新东西——回文 ...

  5. Python执行系统命令并获得输出的几种方法

    [root@a upfc]# ./ffmpeg-linux64-v3.3.1 -i a.mp3 ffmpeg version N-86111-ga441aa90e8-static http://joh ...

  6. Windows10、ARM开发板、VMware虚拟机同时连接Internet

    前段时间有人遇到一些网络连接问题,让我帮忙处理,他想让ARM开发板连接外网,可以连接网络数据库,同时保证自己的电脑可以上网. 本来说直接可以连接一个路由器,分配一个内网IP给ARM就可以了,但是当时那 ...

  7. iOS10 国行iPhone联网权限问题处理

    在iOS10上安装新App, 第一次打开时会询问用户"是否允许应用使用数据"(仅针对国行且需要连接移动网络的设备), 如下图所示, 在用户点击允许之前, App是无法联网的, 这意 ...

  8. Codeforces Round #369 (Div. 2) 套题

    A:模拟水题不说 #include <iostream> #include <string.h> #include <algorithm> #include < ...

  9. MySQL 基础 —— 数据类型、各种变量

    1. 基本数据类型 char:prod_id char(10),括号内的内容表示字符的长度 decimal:十进制,不带参数为整数(四舍五入) text:文本类型,长度不限 2. 日期和时间处理函数 ...

  10. WPF获取原始控件样式

    要获取WPF控件的原始样式,需要我们安装Blend for Visual Studio. 然后,我们打开Blend for Visual Studio,创建一个WPF项目. 然后,我们向页面拖动一个B ...