运行效果：

<!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. Samba完整篇 ubuntu 10.04

    基本的服务器准备工作 修改Root密码 sudo passwd root 在提示下建立新密码 修改静态IP: sudo gedit /etc/network/interfaces   #网络配置文件 ...

  2. android:“新版飞机大战”源码开源啦！

    今天10.24,为了纪念程序猿的节日,把之前写过的一个"飞机大战"的一个源码开源了. 源码地址:https://github.com/nuptboyzhb/newplanegame ...

  3. vux picker

    1.通过实验证明: PopupPicker = TransferDom + Popup + PopupHeader + Picker 2.代码 Picker.vue <!-- Picker 组件 ...

  4. 【Android】应用安全——反编译

    用java开发最操心的就是得到反编译,所以作为开发人员我们须要知道怎么反编译,那样才干知道怎样防止反编译.保证代码安全. 以下来看下比較经常使用的方法! 第一种方式:利用apktool反编译 1,首先 ...

  5. 公用表表达式（CTE）

    公用表表达式(CTE,Common table expression)是和派生表很相似的另一种形式的表表达式,而且具有一些重要优势.CTE 是在 SQL Server 2005 中引入的,是ANSI ...

  6. tesnorflow Batch Normalization

    1.train或者从checkpoint restore后发现moving_mean和moving_variance都是0和1 bn1_mean = graph.get_tensor_by_name( ...

  7. shell如何查看单个或多个文件的行数或总行数

    shell如何查看单个或多个文件的行数或总行数_百度经验 https://jingyan.baidu.com/article/cbf0e500b8470f2eab28937d.html 单个文件   ...

  8. onload onmouseover 事件监听

    <div class="nav"> <ul> <li>翠翠</li> <li>嗯嗯</li> <li& ...

  9. ABAP OLE

    OLE DATA: excel TYPE ole2_object, workbook TYPE ole2_object, sheet TYPE ole2_object, cell TYPE ole2_ ...

  10. IDEA 单元测试

    下载所需的两个 jar 包,下载地址:Download and Install · junit-team/junit4 Wiki · GitHub junit-4.12.jar hamcrest-co ...