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/ ...
随机推荐
- Python Web学习笔记之SSL,TLS,HTTPS
一. SSL 1. SSL简介 SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持.SSL协议可分为两层: SSL记录协议(SSL Record Protocol):它建立在可 ...
- troubleshooting-windows 在 CDH集群环境读取 Hive 表 KrbException: Cannot locate default realm
KrbException: Cannot locate default realm 解决办法 1)拷贝需要组件的配置文件到项目中的 /resources/目录.如hadoop,目录/etc/hadoo ...
- centos下gitlab私服完整安装部署（nginx+MySQL+redis+gitlab-ce+gitlab-shell+）
系统环境cat /etc/redhat-release CentOS release 6.8 (Final) nginx -vnginx version: nginx/1.9.15 redis-cli ...
- 关于Session的概念和测试点
Session概要 Session 是用于保持状态的基于 Web 服务器的方法,在 Web 服务器上保持用户的状态信息供在任何时间从任何页访问. Session 允许通过将对象存储在 Web 服务器的 ...
- Linux中设备号及设备文件【转】
本文转载自:http://blog.csdn.net/ymangu666/article/details/39292651 主.次设备号 应用程序可以通过对/dev 目录下的设备文件读写,从而访问实际 ...
- 【命令】Redis常用命令整理
doc 环境下使用命令: keys 命令 ? 匹配一个字符 * 匹配任意个(包括0个)字符 [] 匹配括号间的任一个字符, ...
- 断开网络连接的dos命令
https://zhidao.baidu.com/question/154994771.html 或者采用服务关闭开启模式,不过没有上面的好用net stop "network connec ...
- [SpringBoot] - 上线一份项目记录
首先在服务器上运行war包. (新建项目) 其后,选择数据库,因为之前感觉mysql比较难安装,这次就再试一次,之前的PostgreSQL没有问题. 将原有文件进行复制,排除导包错误. 首先测试邮件发 ...
- maven插件安装
eclipse安装maven插件,在网上有各种各样的方法,博主使用过的也不止一种,但是留下的印象总是时好时不好,同样的方法也不确定那一次能够成功.其实失败的大多数原因是因为所安装的maven插件版本与 ...
- 04_Windows平台Spark开发环境构建
Spark的开发环境,可以基于IDEA+Scala插件,最终将打包得到的jar文件放入Linux服务器上的Spark上运行 如果是Python的小伙伴,可以在Windows上部署spark+hadoo ...