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年了,去年都没有去总结一下,今年势必要总结 ...
随机推荐
- System.AccessViolationException”类型的未经处理的异常在 System.Data.dll 中发生。其它信息：尝试读取或写入受保护的内存。这通常指示其它内存已损坏。
错误背景: 操作系统:编程环境:VS2013. 语言:VB.net: 数据库:SQLserver2008 做数据库连接时.发生的错误: 错误提示为: 说明:用VB.net连接SQLServer数据 ...
- 2015 Multi-University Training Contest 9-1007 Travelling Salesman Problem
Problem Description Teacher Mai is in a maze with n rows and m columns. There is a non-negative numb ...
- 抢占式内核与非抢占式内核中的自旋锁（spinlock）的差别
一.概括 (1)自旋锁适用于SMP系统,UP系统用spinlock是作死. (2)保护模式下禁止内核抢占的方法:1.运行终端服务例程时2.运行软中断和tasklet时3.设置本地CPU计数器preem ...
- AVAudioSessionCategory的选择
AVAudioSessionCategoryAmbient 或 kAudioSessionCategory_AmbientSound --用于非以语音为主的应用,使用这个category的应用会随着静 ...
- B. Amr and The Large Array(Codeforces Round #312 (Div. 2)+找出现次数最多且区间最小)
B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes input st ...
- 视频生成 量产 win 转 linux ffmpeg linux 安装 对批量视频的尽可能短时间生成
环境准备 Welcome to aliyun Elastic Compute Service! [root@mytest ~]# pip install baidu-aip Looking in in ...
- APDU命令的结构和处理【转】
本文转载自:http://blog.csdn.net/yonghenzhita/article/details/36402525 版权声明:本文为博主原创文章,未经博主允许不得转载. 简单说,IFD( ...
- forceStopPackage与killBackgroundProcesses方法
最近了解一键清理功能,需要实现强制关闭进程的功能.下面介绍下killBackgroundProcesses()方法和forceStopPackage()方法. killBackgroundProces ...
- bzoj 1370 Gang团伙
题目大意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,满足 1. 我朋友的朋友是我的朋友 2. 我敌人的敌人是我的朋友 所有是朋友的人组成一个团伙 告诉你关于这n个人的m条信息,即某两个 ...
- BZOJ_2160_拉拉队排练_manacher
BZOJ_2160_拉拉队排练_manacher Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛 ...