canvas一周一练 -- canvas绘制立体文字(2)
运行效果:
<!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)的更多相关文章
- canvas一周一练 -- canvas绘制中国银行标志(4)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制饼图(3)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制太极图(6)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制马尾图案 (5)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制奥运五环(1)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- 前端使用canvas绘制立体三角形
前端绘制立体效果的三角形的demo 在移动端使用时,需要自适应屏幕.canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%. 如果 ...
- H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报
摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...
随机推荐
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
IT咨询顾问:一次吐血的项目救火 年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...
- Python开发【第*篇】【模块】
模块分为三种: 自定义模块 第三方模块 内置模块 1.模块导入 import model from model.xx.xx import xx from model.xx.xx import xx a ...
- libsqlite3.dylib与libsqlite3.0.dylib的差别
在我们加入数据库框架时,在搜索框中输入sqlitekeyword,以下列表区会显示libsqlite3.dylib,libsqlite3.0.dylib. 此时我们选择libsqlite3.0.dyl ...
- lamdba匿名函数 sored()函数 filter()函数 map函数() 递归函数
帅爆太阳的男人 1,lamdba匿名函数:为了解决一下简单的需求而设计的一句话函数,语法: 函数名 = lambda 参数: 返回值 def func(n): return n*n print(fun ...
- BestCoder Round #56/hdu5463 Clarke and minecraft 水题
Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...
- 牛了个逼,phpstorm查询技巧
两次shift,会弹出最近常用的文件. 可以查询按照方法名,类名,文件名等进行查询. Ctrl+E可以查看最近使用的文件. Ctrl+Shift+E可以查看最近修改的文件. Ctrl+shift+N ...
- 【Codevs3151】交通管制I
Position: http://codevs.cn/problem/3151/ List [Codevs3151]交通管制I List Description Input Output Sample ...
- 美国诚实签经验——必带材料:护照,证件照,DS160确认页,面试预约确认页,+境外照片
Step3. 准备签证材料这些材料如果准备,请一定围绕着你的DS160表格,不可说谎,但可适当修饰,辅佐它,烘托它,营造出一种——你绝无可能去不复返,绝无可能制造麻烦,绝无想占人便宜的意思,并且随时可 ...
- UVaLive 6680 Join the Conversation (DP)
题意:给出n条发言,让你求最大的交流长度并输出标记顺序. 析:这个题要知道的是,前面的人是不能at后面的人,只能由后面的人at前面的,那就简单了,我们只要更新每一层的最大值就好,并不会影响到其他层. ...
- va_start和va_end使用详解(转载)
转自:http://www.cnblogs.com/hanyonglu/archive/2011/05/07/2039916.html 本文主要介绍va_start和va_end的使用及原理. 在以前 ...