html5阴影怎么做,css阴影效果代码
HTML5画布中提供了设置阴影的四个属性值分别为：
context.shadowColor="red "表示设置阴影颜色为红色
context.shadowOffsetX=0表示阴影相对文本的水平距离，0表示两者水平位置重合
context.shadowOffsetY=0表示阴影相对文本的垂直距离，0表示两者垂直位置重合
context.shadowBlur=10阴影模糊效果，值越大模糊越厉害。
一个最简单的带有阴影的矩形代码如下：
context.shadowColor=RGBA(127，127，127，1)；
语境。shadowoffsetx=3；
语境。shadowoffsety=3；
语境。阴影模糊=0；
context.fillStyle=RGBA(0，0，0，0.8)；
context.fillRect(10，hh 10，200，canvas。身高/4-20)；
效果如下：阴影文字：
只要设置shadowOffsetX与阴影社会的值，当值都正数时，阴影相对文字的右下
方偏移。当值都为负数时，阴影相对文字的左上方偏移。3D拉影效果：
在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur
的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。边缘模糊效果文字：
在三维(三维的缩写)拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。
运行效果：
序代码：复制代码代码如下：
！声明文档类型
超文本标记语言
头
meta http-equiv= X-UA-Compatible content= chrome=IE8
meta http-equiv= Content-type Content= text/html；charset=UTF-8
标题画布剪辑演示/标题
link href= default。CSS rel=样式表/
脚本
var ctx=null//全局变量2d上下文
var imageTexture=null
window.onload=function() {
var canvas=文档。getelementbyid( text _ canvas )；
控制台。日志(画布。父节点。客户端宽度)；
画布。宽度=画布。父节点。客户端宽度；
画布。高度=画布。父节点。客户身高；
如果(!canvas.getContext) {
不支持console.log(Canvas .请安装一个HTML5兼容的浏览器。);
返回；
}
var context=画布。获取上下文(“2d”)；
//第一部分-阴影和模糊
context.fillStyle= black
context.fillRect(0，0，canvas.width，canvas。身高/4)；
context.font= 60pt Calibri
context.shadowColor= white
语境。shadowoffsetx=0；
语境。shadowoffsety=0；
context.shadowBlur=20
context.fillText(Blur Canvas ，40，80)；
context.strokeStyle=RGBA(0，255，0，1)；
语境。线宽=2；
context.strokeText(Blur Canvas ，40，80)；
//第二部分-阴影字体
var hh=canvas.height/4;
context.fillStyle= white
context.fillRect(0，hh，canvas.width，canvas。身高/4)；
context.font= 60pt Calibri
context.shadowColor=RGBA(127，127，127，1)；
语境。shadowoffsetx=3；
语境。shadowoffsety=3；
语境。阴影模糊=0；
context.fillStyle=RGBA(0，0，0，0.8)；
context.fillText(模糊画布，40，80 hh)；
//第三节-向下阴影效果
var hh=canvas.height/4 hh；
context.fillStyle= black
context.fillRect(0，hh，canvas.width，canvas。身高/4)；
for(var I=0；i 10我)
{
context.shadowColor=RGBA(255，255，255，((10-I)/10))；
语境。shadowoffsetx=I * 2；
语境。shadowoffsety=I * 2；
语境。阴影模糊=I * 2；
context.fillStyle=RGBA(127，127，127，1)；
context.fillText(模糊画布，40，80 hh)；
}
//第四节-淡化效果
var hh=canvas.height/4 hh；
context.fillStyle= green
context.fillRect(0，hh，canvas.width，canvas。身高/4)；
for(var I=0；i 10我)
{
context.shadowColor=RGBA(255，255，255，((10-I)/10))；
语境。shadowoffsetx=0；
语境。shadowoffsety=-I * 2；
语境。阴影模糊=I * 2；
context.fillStyle=RGBA(127，127，127，1)；
context.fillText(模糊画布，40，80 hh)；
}
for(var I=0；i 10我)
{
context.shadowColor=RGBA(255，255，255，((10-I)/10))；
语境。shadowoffsetx=0；
语境。shadowoffsety=I * 2；
语境。阴影模糊=I * 2；
context.fillStyle=RGBA(127，127，127，1)；
context.fillText(模糊画布，40，80 hh)；
}
for(var I=0；i 10我)
{
context.shadowColor=RGBA(255，255，255，((10-I)/10))；
语境。shadowoffsetx=I * 2；
语境。shadowoffsety=0；
语境。阴影模糊=I * 2；
context.fillStyle=RGBA(127，127，127，1)；
context.fillText(模糊画布，40，80 hh)；
}
for(var I=0；i 10我)
{
context.shadowColor=RGBA(255，255，255，((10-I)/10))；
语境。shadowoffsetx=-I * 2；
语境。shadowoffsety=0；
语境。阴影模糊=I * 2；
context.fillStyle=RGBA(127，127，127，1)；
context.fillText(模糊画布，40，80 hh)；
}
}
/脚本
/头
身体
h1HTML5画布剪辑演示-由阴郁的鱼/h1
预填充和描边剪辑/预
div id=我的画家
画布id=text_canvas/canvas
/div
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。