使用javascript和canvas画月半弯

浏览数：15 / 时间：2015年06月09日

使用javascript和canvas画月半弯，月半弯好浪漫！浏览器须支持html5

查看效果：http://keleyi.com/a/bjac/2fs4sdog.htm

以下是代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <title>使用javascript和canvas画月半弯-柯乐义</title>
 5 <style>
 6 canvas{display: block;border:1px dotted skyblue;}
 7 </style>
 8 </head>
 9 <body>
10 <h1>使用javascript和canvas画月半弯·柯乐义</h1>    
11 <canvas id="canvas-keleyi-com" width="500" height="400"></canvas>
12 <script>
13 var nimo = {};
14 window.onload = function () {
15 nimo.canvas = document.getElementById(‘canvas-ke‘+‘leyi-com‘);
16 nimo.context = nimo.canvas.getContext(‘2d‘);
17 nimo.starBgImg = new Image();
18 nimo.starBgImg.src = ‘http://keleyi.com/keleyi/phtml/html5/22/star-bg.jpg‘;
19 nimo.starBgImg.onload = function () {
20 //填充星星背景
21 nimo.statBg = nimo.context.createPattern(nimo.starBgImg, ‘repeat‘)
22 nimo.context.rect(0, 0, nimo.canvas.width, nimo.canvas.height);
23 nimo.context.fillStyle = nimo.statBg;
24 nimo.context.fill();
25 //绘制月亮轮廓
26 nimo.context.beginPath();
27 nimo.context.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
28 nimo.context.bezierCurveTo(140, 119, 93, 224, 169, 295)
29 //填充月亮轮廓和设置投影
30 nimo.context.shadowColor = "blue";
31 nimo.context.shadowBlur = 3;
32 nimo.context.strokeStyle = "blue";
33 nimo.context.stroke();
34 //填充放射渐变给月亮
35 nimo.radialGradient = nimo.context.createRadialGradient(150, 200, 0, 150, 200, 50);
36 nimo.radialGradient.addColorStop(0, ‘white‘)
37 nimo.radialGradient.addColorStop(1, ‘#999‘)
38 nimo.context.fillStyle = nimo.radialGradient;
39 nimo.context.fill()
40 //绘制月亮的研究和嘴巴    
41 nimo.context.shadowColor = "white";
42 nimo.context.beginPath();
43 nimo.context.moveTo(110, 173);
44 nimo.context.lineTo(114, 173);
45 nimo.context.moveTo(119, 173);
46 nimo.context.lineTo(123, 173);
47 nimo.context.stroke();
48 nimo.context.beginPath();
49 nimo.context.arc(116, 183, 2, 0, 2 * Math.PI);
50 nimo.context.stroke();
51 nimo.context.shadowColor = ‘transparent‘;
52 nimo.context.font = "15px 微软雅黑"
53 nimo.context.fillText(‘您好，我是月亮，祝您的美梦像星星一样永恒!‘, 100, 100)//设置文字及在图片上的位置
54 }
55 }
56 </script>
57 </body>
58 </html>