使用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. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  2. MVC4做网站后台:用户管理 ——用户组 1、添加用户组

    打开控制器UserGroupController 添加Add action /// <summary> /// 添加用户组 /// </summary> /// <ret ...

  3. c++ stringstream（老好用了）

    前言: 以前没有接触过stringstream这个类的时候,常用的字符串和数字转换函数就是sscanf和sprintf函数.开始的时候就觉得这两个函数应经很叼了,但是毕竟是属于c的.c++中引入了流的 ...

  4. 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 分析MariaDB初始化脚本mysql_install_db

    在初始化MySQL的过程中经常会碰到各种问题,如 FATAL ERROR: Could not find ./bin/my_print_defaults ERROR: Can't create/wri ...

  6. 如何部署Icinga客户端

    Icinga客户端的部署相对于服务器端来说,简单很多.对于服务器端来说,如果要通过以下这种方式来监控服务器,必须包含三个组件,Icinga内核,Icinga插件,NRPE(Nagios Remote ...

  7. 【jQuery小实例】---3 凤凰网首页图片动态效果

    ---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...

  8. ZOJ Problem Set - 1067 Color Me Less

    这道题目很简单,考察的就是结构体数组的应用,直接贴代码了 #include <stdio.h> #include <math.h> typedef struct color { ...

  9. 1Z0-053 争议题目解析681

    1Z0-053 争议题目解析681 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 681.The environmental variable ORACLE-BASE is set ...

  10. T-SQL高级查询语句

    高级查询 1.连接查询,对结果集列的扩展select * from info select * from info,nation #形成笛卡尔积select * from info,nation wh ...