使用javascript和canvas画月半弯，月半弯好浪漫！浏览器须支持html5
查看效果：http://keleyi.com/a/bjad/8xqdm0r2.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>
2634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
