使用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. WCF学习之旅—WCF概述（四）

    一.WCF概述 1) 什么是WCF? Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架.借助 WCF,可以将数据作为异步消息从一个服务终 ...

  2. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  3. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  4. IOS学习之初识KVC

    什么是kvc? kvc (key-value coding )键值编码,是ios 提供的一种通过key间接的来访问对象属性的一直方式. 哪些类支持kvc操作? kvc的操作方法由NSKeyValueC ...

  5. ASP.NET Core的配置（3）： 将配置绑定为对象[上篇]

    出于编程上的便利,我们通常不会直接利用ConfigurationBuilder创建的Configuration对象读取某个单一配置项的值,而是倾向于将一组相关的配置绑定为一个对象,我们将后者称为Opt ...

  6. 相克军_Oracle体系_随堂笔记010-SCN

    1.SCN的意义?system change number     时间    先后.新旧 select dbms_flashback.get_system_change_number, SCN_TO ...

  7. MySQL入门03-MySQL配置安全性、易用性

    一.设定管理员用户和密码 二.处理test库权限隐患 三.自定义脚本提升易用性 中间定义文件 启动MySQL服务 关闭MySQL服务 快捷登录MySQL 四.设置开机自动启动MySQL服务 Refer ...

  8. Cesium原理篇：3最长的一帧之地形(4：重采样)

           地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方 ...

  9. C#缓存操作

    1.缓存辅助方法类的接口代码: public interface IThrottleStore { /// <summary> /// 试图获取值 /// </summary> ...

  10. 为.NET搭建Linux的开发环境,鄙视那些将简单事情复杂化的人

    写在前面的吐槽 原本跨平台开发很容易的事情, 很多人把它弄得很麻烦,给外人的感觉:你们.NET跨平台开发好不成熟,好麻烦哦. ..................................... ...