参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
<!DOCTYPE html>
<html>
<head>
<title>2-7,2-8</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 0px;
top: 0px;
margin: 20px;
background: #ffffff;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas' width='1000' height='1000'>
Canvas not supported
</canvas>
<script src='2-7，2-8.js'></script>
</body>
</html>
2-7，2-8.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.shadowColor= 'rgba(0,0,0,0.6)';
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.shadowBlur = 6;
context.lineWidth = 30;
context.fillStyle = 'black';
context.fillRect(75,100,150,150);
context.font='38pt Arial';
context.fillStyle='blue';
context.fillText('HTML5 Canvas Shadow',canvas.width/2-450,canvas.height/2-150);
效果如图所示：
网友评论