Html5学习-canvas影子效果的显示
日期：2014-05-17 浏览次数：20741 次
Html5学习---------canvas阴影效果的显示
<!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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
