HTML5 canvas绘图夜空小屋

伙伴们园友们，夜深了，休息啦，好人好梦...

查看效果：http://hovertree.com/texiao/html5/28/

效果图如下：

代码如下：

 <!doctype html>

 <html>

 <head><meta name="viewport" content="width=device-width, initial-scale=1" />

 <title>HTML5 Canvas绘制恬静夜景? - 何问起</title><base target="_blank" />

 <meta charset="utf-8">

 <style>*{margin:0px;padding:0px;}body{text-align:center;}a{color:#333333;}</style>

 </head>

 <body>

 <div><h2>何问起：程序媛，攻城狮，入夜了，睡觉啦......</h2>

 </div>

 <canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">

 何问起提醒：此浏览器不支持canvas，请更换浏览器

 </canvas>

 <div><a href="http://hovertree.com/h/bjaf/umtdyo4d.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>

 <script>

 hovertreenight(); setInterval(hovertreenight, 4000);

 function hovertreenight () {

 canvas = document.getElementById('hove'+'rtreecanvas');

 canvas.width=1000;

 canvas.height=560;

 context=canvas.getContext('2d');

 drawing(context);

 drawing_start_1(context);

 drawing2(context);

 go();

 draw_moon(context);

 draw_moon2(context);

 draw_moon3(context);

 }

 function go(){

 for(var i=0;i<100;i++){

 var r=Math.random()*10+3;

 var x=Math.random()*1000;

 var y=Math.random()*300;

 var a=Math.random()*360;

 drawing_start_2(context,x,y,r,r/2.0,a);

 }

 }

 function draw(cxt){

 cxt.beginPath();

 for(i=0;i<56;i++){

 cxt.moveTo(0,i*20);

 cxt.lineTo(1000,i*20);

 cxt.stroke();

 }

 }

 function draw2(cxt){

 cxt.beginPath();

 for(i=0;i<56;i++){

 cxt.moveTo(i*20,0);

 cxt.lineTo(i*20,560);

 cxt.stroke();

 }

 }

 function drawing(cxt){ //画整体背景颜色渐变

 var linearGrad=cxt.createLinearGradient(500,0,500,540);

 linearGrad.addColorStop(0.0,'black');

 linearGrad.addColorStop(1.0,'blue');

 cxt.fillStyle=linearGrad;

 cxt.fillRect(0,0,1000,540);

 cxt.fill();

 }

 function drawing2(cxt){ //画房子

 cxt.beginPath();

 cxt.moveTo(0,540);

 cxt.lineTo(1000,540);

 cxt.lineTo(1000,560);

 cxt.lineTo(0,560);

 cxt.closePath();

 cxt.fillStyle="black";

 cxt.fill();

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(200,540);

 cxt.lineTo(360,540);

 cxt.lineTo(360,480);

 cxt.lineTo(200,480);

 cxt.closePath();

 cxt.fillStyle="black";

 cxt.fill();

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(120,480);

 cxt.lineTo(280,420);

 cxt.lineTo(440,480);

 cxt.closePath();

 cxt.fillStyle="black";

 cxt.fill();

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(320,435);

 cxt.lineTo(320,420);

 cxt.lineTo(340,420);

 cxt.lineTo(340,442);

 cxt.closePath();

 cxt.fillStyle="black";

 cxt.fill();

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(240,520);

 cxt.lineTo(260,520);

 cxt.lineTo(260,500);

 cxt.lineTo(240,500);

 cxt.closePath();

 cxt.fillStyle="yellow";

 cxt.fill();

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(240,510);

 cxt.lineTo(260,510);

 cxt.moveTo(250,500);

 cxt.lineTo(250,520);

 cxt.closePath();

 cxt.stroke();

 }

 function drawing_start_1(cxt){ //星星背景

 cxt.beginPath();

 cxt.rect(0,0,1000,550);

 cxt.closePath();

 cxt.stroke();

 }

 function drawing_start_2(cxt,x,y,outerR,innerR,rot){ //画星星 何问起

 cxt.beginPath();

 for(var i=0;i<5;i++){

 cxt.lineTo((Math.cos(18+i*72-rot)/180*Math.PI)*outerR+x,

 -Math.sin((18+i*72-rot)/180*Math*outerR+y));

 cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,

 -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);

 }

 cxt.fillStyle="#cf3"

 cxt.fill();

 cxt.closePath();

 cxt.stroke();

 }

 function draw_moon(cxt){ //画月亮 hovertree.com

 cxt.beginPath();

 cxt.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);

 cxt.bezierCurveTo(140, 119, 93, 224, 169, 295);

 cxt.fillStyle="#ddd";

 cxt.fill();

 cxt.stroke();

 }

 function draw_moon2(cxt){ //月亮的眼睛。。。

 cxt.beginPath();

 cxt.moveTo(110,180);

 cxt.lineTo(115,180);

 cxt.stroke();

 }

 function draw_moon3(cxt){ //zzz...

 cxt.beginPath();

 cxt.moveTo(40,80);

 cxt.lineTo(60,80);

 cxt.lineTo(40,100);

 cxt.lineTo(60,100);

 cxt.strokeStyle="yellow"

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(63,108);

 cxt.lineTo(80,108);

 cxt.lineTo(63,123);

 cxt.lineTo(80,123);

 cxt.strokeStyle="yellow"

 cxt.stroke();

 cxt.beginPath();

 cxt.moveTo(86,130);

 cxt.lineTo(100,130);

 cxt.lineTo(86,142);

 cxt.lineTo(100,142);

 cxt.strokeStyle="yellow"

 cxt.stroke();

 }

 // http://www.cnblogs.com/jihua/p/webfront.html

 </script>

 </body>

 </html>

转自：http://hovertree.com/h/bjaf/umtdyo4d.htm

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

伙伴们休息啦canvas绘图夜空小屋的更多相关文章

  1. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  2. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. HTML5_03之Canvas绘图

    1.Canvas绘图--JS绘图: <canvas id='c1' width='' height=''></canvas> * Canvas尺寸不能用CSS设置: c1.he ...

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

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

  6. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  7. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. Canvas绘图基础（一）

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  9. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

随机推荐

  1. 开源 iOS 项目分类索引大全 － 待整理

    开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...

  2. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  3. Python学习实践------正向最大匹配中文分词

    正向最大匹配分词: 1.加载词典文件到集合中,取词典文件中最大长度词的length 2.每次先在句子中按最大长度分割,然后判断分割的词是否存在字典中,存在则记录此词,调整起始点. 3.不存在则按最大长 ...

  4. IM 去中心化概念模型与架构设计

    今天打算写写关于 IM 去中心化涉及的架构模型变化和设计思路,去中心化的概念就是说用户的访问不是集中在一个数据中心,这里的去中心是针对数据中心而言的. 站在这个角度而言,实际上并非所有的业务都能做去中 ...

  5. RCP:ISourceLocator翻译

    org.eclipse.debug.core.model.ISourceLocator A source locator locates source elements for stack frame ...

  6. Fedora 22中的Locale and Keyboard Configuration

    Introduction The system locale specifies the language settings of system services and user interface ...

  7. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  8. 我为NET狂群福利：逆天常用的一些谷歌浏览器插件

    逆天书库:http://www.cnblogs.com/dunitian/p/5734677.html 常用工具:http://www.cnblogs.com/dunitian/p/5640147.h ...

  9. 搭建自己的Nuget服务器

    序言 你们公司有没有好多项目,有没有好多类库,你们的类库是在tfs中管理,还是svn或者github,又或者是各自为政版本类库随意使用? 那么你们使用者写类库的时候方便吗? 有没有更新下载,版本不一致 ...

  10. webService学习之路（二）：springMVC集成CXF快速发布webService

    继上一篇webService入门之后,http://www.cnblogs.com/xiaochangwei/p/4969448.html ,现在我将我周六在家研究的结果公布出来 本次集成是基于之前已 ...