您的位置：首页 > Web前端 > HTML5

Html5学习---------canvas阴影效果的显示

2012-10-30 23:04 711 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function drawShadow(e) {
var shadowCanvasElt = document.getElementById("shadowCanvas");
if (shadowCanvasElt && shadowCanvasElt.getContext) {
var shadowCanvasCtx = shadowCanvasElt.getContext("2d");
//基本阴影属性设定
shadowCanvasCtx.shadowColor = "#000000";
//在X轴上偏移10(右)
shadowCanvasCtx.shadowOffsetX = 10;
//在Y轴上偏移10(右)
shadowCanvasCtx.shadowOffsetY = 10;
//高斯模糊
shadowCanvasCtx.shadowBlur = 10;
//画一个简单的矩形
shadowCanvasCtx.fillStyle = "red";
shadowCanvasCtx.fillRect(75, 20, 200, 100);
//文字渲染
var theString = "在canvas上绘制文字";
//设置一下font
shadowCanvasCtx.font = "25pt 微软雅黑";
//将阴影减弱一些
shadowCanvasCtx.fillStyle = "green";
shadowCanvasCtx.shadowColor = "rgba(0,100,100,0.5)";
//在X轴上偏移5(左)
shadowCanvasCtx.shadowOffsetX = -5;
//在Y轴上偏移5(左)
shadowCanvasCtx.shadowOffsetY = -5;
//高斯模糊
shadowCanvasCtx.shadowBlur = 5;
shadowCanvasCtx.fillText(theString, 50, 200);
}
else{
alert("您的浏览器不支持canvas，请更换！");
}
}
window.addEventListener("load", drawShadow, false);
</script>
</head>
<body>
<canvas id="shadowCanvas" width="400px" height="300px" style="border:1px dotted">
</canvas>
</body>
</html>

效果图：

如果喜欢请关注本博客：冰镇宝贝的家http://blog.csdn.net/bkq421511585

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航