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/ ...
随机推荐
- 配置mysql主从数据库
来源地址:https://www.cnblogs.com/alvin_xp/p/4162249.html Mysql主从配置,实现读写分离 大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡 ...
- 实验二Java面向对象程序设计
一.单元测试 了解三种代码: 1.伪代码:类似于自然语言说明,描述实现逻辑思维 2.产品代码:程序员编辑的开发代码,要求可修改.可移植 3.测试代码:我理解是相当于开发软件在软件开放之前,程序员找到b ...
- 2018-2019-1 20189218《Linux内核原理与分析》第八周作业
编译链接的过程 编译就是把文本形式源代码翻译为机器语言形式的目标文件过程. 链接是把目标文件.操作系统的启动代码和用到的库文件进行组织最终形成可执行代码的过程. 对于GCC来说,编译源代码并最终形成可 ...
- tf.random_uniform的使用
tf.random_uniform((4, 4), minval=low,maxval=high,dtype=tf.float32)))返回4*4的矩阵,产生于low和high之间,产生的值是均匀分布 ...
- JavaScript常用操作，常用类
算术运算符 重点关注 算数,赋值,逻辑运算符,三目运算符 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 快速排序|2018年蓝桥杯B组题解析第五题-fishers
标题:快速排序 以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. #include <s ...
- HDU 5889 Barricade（最短路+最小割）
http://acm.hdu.edu.cn/showproblem.php?pid=5889 题意: 给出一个图,帝国将军位于1处,敌军位于n处,敌军会选择最短路到达1点.现在帝国将军要在路径上放置障 ...
- HDU 3586 Information Disturbing（二分+树形dp）
http://acm.split.hdu.edu.cn/showproblem.php?pid=3586 题意: 给定一个带权无向树,要切断所有叶子节点和1号节点(总根)的联系,每次切断边的费用不能超 ...
- BZOJ 1006: [HNOI2008]神奇的国度（弦图染色）
http://www.lydsy.com/JudgeOnline/problem.php?id=1006 题意: 思路: 这个就是弦图染色问题,弦图啥的反正我也不懂,具体看论文https://wenk ...
- 直接通过OptionalAttribute, DefaultParameterValueAttribute定义缺省参数