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

web前端：http://www.cnblogs.com/jihua/p/webfront.html

使用javascript和canvas画月半弯的更多相关文章

  1. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  2. JavaScript之canvas

    num.push(x,y); 动画草图(举个栗子,我们把数字“2”给画出来): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. 月半小夜曲下的畅想--DOCTYPE模式

    月半小夜曲下的畅想--DOCTYPE模式 @(css3 box-sizing)[doctype声明|quirks模式|妙瞳] DOCTYPE文档类型标签,该标签是将特定的标准通用标记语言或者XML文档 ...

  4. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

  5. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  6. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  7. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

  8. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  9. 初探Javascript之Canvas

    什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

随机推荐

  1. C#设计模式-代理模式

    在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代理对象代替 ...

  2. 【深入浅出Linux网络编程】 “实践 -- TCP & UDP”

    通过上一篇博客的学习,你应该对基于epoll的事件触发机制有所掌握,并且通过阅读sio.c/sio.h应该也学会了如何封装epoll以及如何通过设计令epoll更加实用(用户回调,用户参数). 简单回 ...

  3. 转帖：DotNet 资源大全中文版

    (注:下面用 [$] 标注的表示收费工具,但部分收费工具针对开源软件的开发/部署/托管是免费的) API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框 ...

  4. MindManger 2016 64位 破解版

    下载地址:http://pan.baidu.com/s/1mi7xkIO 如果失效请去 “毒逆天吧” 发个求助帖即可就有人补上

  5. Android混淆代码

    Android代码混淆是必须的,java层代码如果不做混淆等于把源代码送人了.那如何做混淆呢? 之前一般都是提到采用proguard.cfg,但使用新版本ADT后没有这个文件了,取而代之的是progu ...

  6. Android sendevent/getevent 用法

    前言:最近在弄一个模拟用户点击屏幕的功能,并且不需要用户点击屏幕,后台自动给输入框赋值,类似pc端按键精灵的功能,在网上找了很多人的资料,写的都不是太详细,一知半解.还要自己慢慢研究.于是我这边写一篇 ...

  7. JavaScript阻塞剖析与改善

    一.阻塞特性 <高性能JavaScript>一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度. 说到无 ...

  8. Javascript一些实用技巧

    1.利用NumberObj的toString(radix)方法获取随机数字字母字符串,radix是表示数字的基数,就是进制,如下所示 var getRndAlphaNumStr = (len) =&g ...

  9. （转）运维角度浅谈MySQL数据库优化

    转自:http://lizhenliang.blog.51cto.com/7876557/1657465 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架 ...

  10. Oracle函数之LISTAGG

    最近在学习的过程中,发现一个挺有意思的函数,它可实现对列值的拼接.下面我们来看看其具体用法. 用法: 对其作用,官方文档的解释如下: For a specified measure, LISTAGG  ...