我们可以使用4个参数给画布上的形状添加阴影。
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
例子：给对象添加阴影
<!DOCTYPE HTML>
<html lang="cn">
<head>
<meta charset="utf-8">
<title>canvans</title>
<script src="modernizr-custom.js"></script>
<script type="text/javascript">
//检测window是否加载完毕最终的代码
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
//检测是否支持canvas
//使用modernizr.js
function canvasSupport() {
return Modernizr.canvas;
}
//
function canvasApp() {
if (!canvasSupport()) {
return;
} else {
var theCanvas = document.getElementById("canvas"); //创建画布实例
var context = theCanvas.getContext("2d"); //获得2D上下文
}
drawScreen();
function drawScreen() {
context.fillStyle = 'red';
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowColor = 'black';
context.shadowBlur = 4;
context.fillRect(10, 10, 100, 100);
context.shadowOffsetX = -4;
context.shadowOffsetY = -4;
context.shadowColor = 'black';
context.shadowBlur = 4;
context.fillRect(150, 10, 100, 100);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgb(100,100,100)';
context.shadowBlur = 8;
context.arc(200, 300, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500">
Your browser does not support the canvas element.
</canvas>
</body>
</html>