使用javascript和canvas画月半弯，月半弯好浪漫！浏览器须支持html5
?
查看效果：http://keleyi.com/a/bjad/8xqdm0r2.htm
?
以下是代码：
<!doctype html>
<html>
<head>
<title>使用javascript和canvas画月半弯-柯乐义</title>
<style>
canvas{display: block;border:1px dotted skyblue;}
</style>
</head>
<body>
<h1>使用javascript和canvas画月半弯·柯乐义</h1>
<canvas id="canvas-keleyi-com" width="500" height="400"></canvas>
<script>
var nimo = {};
window.onload = function () {
nimo.canvas = document.getElementById('canvas-ke'+'leyi-com');
nimo.context = nimo.canvas.getContext('2d');
nimo.starBgImg = new Image();
nimo.starBgImg.src = 'http://keleyi.com/keleyi/phtml/html5/22/star-bg.jpg';
nimo.starBgImg.onload = function () {
//填充星星背景
nimo.statBg = nimo.context.createPattern(nimo.starBgImg, 'repeat')
nimo.context.rect(0, 0, nimo.canvas.width, nimo.canvas.height);
nimo.context.fillStyle = nimo.statBg;
nimo.context.fill();
//绘制月亮轮廓
nimo.context.beginPath();
nimo.context.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
nimo.context.bezierCurveTo(140, 119, 93, 224, 169, 295)
//填充月亮轮廓和设置投影
nimo.context.shadowColor = "blue";
nimo.context.shadowBlur = 3;
nimo.context.strokeStyle = "blue";
nimo.context.stroke();
//填充放射渐变给月亮
nimo.radialGradient = nimo.context.createRadialGradient(150, 200, 0, 150, 200, 50);
nimo.radialGradient.addColorStop(0, 'white')
nimo.radialGradient.addColorStop(1, '#999')
nimo.context.fillStyle = nimo.radialGradient;
nimo.context.fill()
//绘制月亮的研究和嘴巴
nimo.context.shadowColor = "white";
nimo.context.beginPath();
nimo.context.moveTo(110, 173);
nimo.context.lineTo(114, 173);
nimo.context.moveTo(119, 173);
nimo.context.lineTo(123, 173);
nimo.context.stroke();
nimo.context.beginPath();
nimo.context.arc(116, 183, 2, 0, 2 * Math.PI);
nimo.context.stroke();
nimo.context.shadowColor = 'transparent';
nimo.context.font = "15px 微软雅黑"
nimo.context.fillText('您好，我是月亮，祝您的美梦像星星一样永恒!', 100, 100)//设置文字及在图片上的位置
}
}
</script>
</body>
</html>
?
