使用canvas绘制为图形添加阴影比较简单,主要是四个方法:
shadowColor:设置阴影颜色
shadowOffsetX:设置图形与阴影的水平距离,也是水平偏移量。当shadowOffsetX=0时,表示阴影位于形状的正下方,shadowOffsetX=20时表示阴影位于形状 left 位置右侧的 20 像素处,当shadowOffsetX=-20时表示阴影位于形状 left 位置左侧的 20 像素处。
shadowOffsetY:设置图形与阴影的垂直距离,也就是垂直方向的偏移量。当shadowOffsetY=0时表示阴影位于形状的正下方。当shadowOffsetY=20时表示阴影位于形状 top 位置下方的 20 像素处。当shadowOffsetY=-20时表示阴影位于形状 top 位置上方的 20 像素处。
shadowBlur:设置阴影的模糊级数,数字越大越模糊,越小越清晰。
这四个方法必须一起使用,不然达不到阴影的效果。
实例代码如下:
1、页面结构:
<canvas id="myCanvas" style="margin:50px;display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器不支持canvas,请换个浏览器试试
<!--这句话在支持canvas的浏览器中会被忽略,不支持的则会显示出来-->
</canvas>
2、JS实现:
window.οnlοad=function(){
var myCanvas = document.getElementById("myCanvas");
if(myCanvas.getContext("2d")){
myCanvas.width = document.documentElement.clientWidth-20;;
myCanvas.height = document.documentElement.clientHeight-20;;
var context =myCanvas.getContext("2d");
context.fillStyle="#058";//填充色
context.font="bold 120px Arial";//设置字体
context.textAlign = "center";//水平居中
context.textBaseline="middle";
//向下的阴影
context.save();
//设置阴影的颜色:灰色
context.shadowColor="gray";
//设置阴影的偏移量,当都为正数时阴影在右边及下边,若为负数则在左边和上边
context.shadowOffsetX=15;
context.shadowOffsetY=15;
//设置阴影的模糊度:数字越大越模糊,越小越清晰
context.shadowBlur=5;
context.fillText("CANVAS",myCanvas.width/2,myCanvas.height/3);
context.restore();
//向上的阴影
context.save();
context.shadowColor="gray";
context.shadowOffsetX=-15;
context.shadowOffsetY=-15;
context.shadowBlur=10;
context.fillText("CANVAS",myCanvas.width/2,myCanvas.height*2/3);
context.restore();
}else{
return false;
}
}
感谢老师的分享!