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/ ...
随机推荐
- Python3.x（windows系统）安装matplotlib库
Python3.x(windows系统)安装matplotlib库 cmd命令: pip install matplotlib 执行结果:
- Linux 系统版本查询
显示Linux版本信息 输入"cat /proc/version",说明正在运行的内核版本. 输入"cat /etc/issue", 显示的是发行版本信息. 输 ...
- 20145206邹京儒《网络对抗技术》 PC平台逆向破解
20145206邹京儒<网络对抗技术> PC平台逆向破解 注入shellcode并执行 一.准备一段shellcode 二.设置环境 具体在终端中输入如下: apt-cache searc ...
- 【第六章】 springboot + 事务
在实际开发中,其实很少会用到事务,一般情况下事务用的比较多的是在金钱计算方面. mybatis与spring集成后,其事务该怎么做?其实很简单,直接在上一节代码的基础上在相应的方法(通常是servic ...
- 4、CommonChunkPlugin提取公共js-提取多个
cnpm install css-loader --save-dev //css-loader 是将css打包进js cnpm install style-loader --save-dev ...
- C#学习笔记（二）：变量、数据类型和运算符
变量.数据类型 给变量赋值,如果想指定float,在数字后面加上F/f:如果想指定decimal,在数字后面加上m. 0-9:48-57 A-Z:65-90 a-z:97-122 ...
- Java东西太多，记录一些知识点
实习两个月了,这两个月接触了不少东西,简单列举一下知识,未来需要多多学习和了解. 1.前端js.extjs4.Jquery(js框架这些基本现学现用): 2.基础不好要补补Servlet和JSP(再往 ...
- Java 面向对象之接口、多态
01接口的概念 A:接口的概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成 ...
- ant的原理
ANT批量完成项目代码的重新编译.打包.测试.java语言编写与平台无关的. Ant工具 Ant是一种基于Java的build工具.理论上来说,它有些类似于(Unix)C中的make ,但没有make ...
- bash 判断两个文件相等的代码
#!/bin/bash #定义参数 username="xxx" passwd="xxxxxxxx" dbname="xxx" #判断入参为 ...