使用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. 如果用css的border属性画一个三角形

    假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...

  2. jQuery Colorbox弹窗插件使用教程小结、属性设置详解

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  3. jsp 分页， 判断是第一页，和最后一页.

    <% //页的行数 int pagesize =20; //当前页 int currentPage = 1; try { currentPage = Integer.parseInt(reque ...

  4. 【Win10应用开发】自定义桌面壁纸

    调用通用的API来设置桌面壁纸,是一件既简单又有趣的事情,结合XAML可以生成图像的特性,你甚至可以做一个应用,让用户用他所拍的照片做成一张自定义壁纸,然后作为桌面壁纸. 这个API是通用的,应用运行 ...

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

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

  6. .Net 转战 Android 4.4 日常笔记（7）--apk的打包与反编译

    apk(android package)就是我们安卓系统的安装文件,可以在模拟器和手机中直接打开安装,从项目中打包apk有几种方式可取 一.最简单的方法(类似我们的winfrom) 只要我们调试或者运 ...

  7. 订制DOM选择器

    本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...

  8. 7.Struts2复杂类型数据的接受

    复合类型数据的接收 所谓复合类型数据是指,一个JavaBean实例的属性值,而这些值又作为参数传递给Action. Action若要接收这些数据,需要做到以下几点: (1)定义Action时,将该Be ...

  9. phpStorm入门

    首先在官网上下载并安装:http://www.jetbrains.com/phpstorm/; 安装成功后需要激活: IntelliJ IDEA开源社区 提供了如下通用激活方法: 注册时选择Licen ...

  10. Struts2 源码分析——DefaultActionInvocation类的执行action

    本章简言 上一章讲到关于拦截器的机制的知识点,让我们对拦截器有了一定的认识.我们也清楚的知道在执行用户action类实例之前,struts2会先去执行当前action类对应的拦截器.而关于在哪里执行a ...