html5阴影
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绘制阴影</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:3px dashed #0094ff;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//设置阴影的模糊度
ctx.shadowBlur = 10;
//设置阴影的颜色
ctx.shadowColor = "#f00";
//设置阴影在X、Y方向的偏移
ctx.shadowOffsetX =6;
ctx.shadowOffsetY = -5;
ctx.strokeStyle = "#ff0";
ctx.font = "50px 黑体";
ctx.textBaseline = "top";
ctx.strokeText("阴影文字小蕾", 100, 10)
ctx.fillStyle = "#ff0";
ctx.font = "50px 黑体";
ctx.textBaseline = "top";
ctx.fillText("阴影文字小蕾", 100, 120)
ctx.fillRect(20, 200, 100, 150);
ctx.lineWidth = 8;
ctx.strokeRect(150, 200, 100, 150);
</script>
</body>
</html>
html5阴影的更多相关文章
- HTML5阴影与渐变
一.阴影 阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor.shadowBlur为阴影的像素模糊值,shad ...
- HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- 酷炫，用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- HTML5画布（阴影）
案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...
- HTML5 给图形绘制阴影(绘制五角星示例)
几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...
- html5 canvas创建阴影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- P2503 [HAOI2006]均分数据
P2503 [HAOI2006]均分数据 模拟退火+dp (不得不说,我今天欧气爆棚) 随机出1个数列,然后跑一遍dp统计 #include<iostream> #include<c ...
- c++ 11和java 8都支持lambda表达式
c++ 11居然都支持lambda表达式了,看了这确实是有必要了. 具体可见http://www.cprogramming.com/c++11/c++11-lambda-closures.html
- 20145307陈俊达_安卓逆向分析_APKtools分析smail
20145307陈俊达_安卓逆向分析_APKtools分析smail 引言 真刺激呢!到了第二篇博客了,难度开始加大,之前是简单的dex2jar和有图形界面的jd-gui,现在来隆重介绍强大的反汇编工 ...
- 【转】linux之cp/scp命令＋scp命令详解
linux之cp/scp命令+scp命令详解 名称:cp 使用权限:所有使用者 使用方式: cp [options] source dest cp [options] source... dire ...
- P3901 数列找不同
P3901 数列找不同 题目描述 现有数列 \(A_1,A_2,\cdots,A_N\) ,Q 个询问 \((L_i,R_i)\) , \(A_{Li} ,A_{Li+1},\cdots,A_{Ri} ...
- 51NOD 1081 子段求和
1081 子段求和 给出一个长度为N的数组,进行Q次查询,查询从第i个元素开始长度为l的子段所有元素之和. 例如,1 3 7 9 -1,查询第2个元素开始长度为3的子段和,1 {3 7 9} ...
- Ubuntu Eclipse ns3编译中 遇到的OSError 系列问题
问题1:Permission denied 解决方法:修改文件权限,利用 chmod 命令 修改在 /home/wasdns/workspace/MyNS3_Mac/ns-3.25 (eclipse工 ...
- HDU 6072 Logical Chain（Kosaraju+bitset）
http://acm.hdu.edu.cn/showproblem.php?pid=6072 题意: 给你$n*n$的矩阵,每次修改k条边,让你计算其中能相互到达的点对有多少. 思路: 其实就是求强连 ...
- Python的collections模块中的OrderedDict有序字典
如同这个数据结构的名称所说的那样,它记录了每个键值对添加的顺序. ? 1 2 3 4 5 6 d = OrderedDict() d['a'] = 1 d['b'] = 10 d['c'] = 8 f ...
- Java I/O学习——File
File我们出看可能会根据字面意思理解为文件,其实它既代表文件又代表目录. 这里有一个例子可以列出指定目录下的所有文件或目录, 以及我们可以过滤得到我们想要的文件 import java.io.Fil ...