使用javascript和canvas画月半弯

时间：2022-09-24 23:04:16

使用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&plus;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. Webpack教程

    打开链接:Webpack教程

  2. Spring&plus;SpringMvc&plus;Mybatis整合注意事项

    1.web.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi ...

  3. linux 学习随笔-vim

    在自己的home/username目录下 更改vim的配置文件 如果没这个文件 copy其他人的配置文件 然后拖到此目录下 执行mv vimrc ~/.vimrc 更改名字 即可生效 只对当前用户生效 ...

  4. 洛谷P3378 【模板】堆

    P3378 [模板]堆 160通过 275提交 题目提供者HansBug 标签 难度普及- 提交  讨论  题解 最新讨论 经实际测试 堆的数组开3000- 题目有个问题 为什么这个按课本堆标准打的- ...

  5. 【C语言】-数据输入-scanf&lpar; &rpar;和getchar&lpar; &rpar;

    格式化输入函数scanf( ) scanf( )功能: 按照指定的格式读入键盘上输入的若干个任意类型的数据,存入到argument参数所指向的内存单元,函数返回值为读入并赋给argument的数据个数 ...

  6. java线层的使用

    class Do3 { public static void main(String[] args) { XC d1=new XC("小王"); XC d2=new XC(&quo ...

  7. phpStorm打开提示 failed to create JVM 的解决的方法

    phpStorm 软件打开执行提示 failed to create JVM的解决的方法. 改动文件 D:\Program Files (x86)\JetBrains\PhpStorm 7.1.3\b ...

  8. SDWebImage源码解读之干货大总结

    这是我认为的一些重要的知识点进行的总结. 1.图片编码简介 大家都知道,数据在网络中是以二进制流的形式传播的,那么我们该如何把那些1和0解析成我们需要的数据格式呢? 说的简单一点就是,当文件都使用二进 ...

  9. linux操作系统基础篇（八）

    shell脚本的变量以及正则表达式 一.变量 含义:程序的运行就是一些列状态的变量->用变量值的变化去表示. 命名规则 以字母或下划线开头,剩下的部分可以是:字母.数字.下划线. 最好遵循下述规 ...

  10. HTML的基本介绍

    HTML(HyperText Markup Language): 超文本标记语言,超文本就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. HTML是标记语言!!!!! HTML是标记语言! ...

相关文章