随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

使用javascript和canvas画月半弯

使用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>