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. 编写简单的Makefile文件

    makefile中的编写内容如下: www:hello.c x.h gcc hello.c -o hello clean: rm hello www:hello.c  x.h 表示生成www这个文件需 ...

  2. Josephus环类问题，java实现

    写出一个双向的循环链表,弄一个计数器,我定义的是到三的时候,自动删除当前节点,很简单. package Com; import java.util.Scanner; /* * 约瑟夫环问题,有n个人组 ...

  3. [转载]MVVM模式原理分析及实践

    没有找到很好的MVVM模式介绍文章,简单找了一篇,分享一下.MVVM实现了UI\UE设计师(Expression Blend 4设计界面)和软件工程师的合理分工,在SilverLight.WPF.Wi ...

  4. NodeJS的代码调试和性能调优

    本文转自我的个人博客. NodeJS 自 2009 年显露人间,到现在已经六个年头了,由于各种原因,中间派生出了个兄弟,叫做 iojs,最近兄弟继续合体,衍生出了 nodejs4.0 版本,这东西算是 ...

  5. 程序猿是如何解决SQLServer占CPU100%的

    文章目录 遇到的问题 使用SQLServer Profiler监控数据库 SQL1:查找最新的30条告警事件 SQL2:获取当前的总报警记录数 有哪些SQL语句会导致CPU过高? 查看SQL的查询计划 ...

  6. 如何从本地导入.nupkg文件

    买了本asp.net mvc4高级编程 里面的源码下载下来是.nupkg后缀的文件,不知道怎么引入到项目中, baidu无果,只好google,可怜我英语四级都难的人,不过所幸还是找到了方法: htt ...

  7. CSharpGL(10)两个纹理叠加

    CSharpGL(10)两个纹理叠加 本文很简单,只说明如何用shader实现叠加两个纹理的效果. 另外,最近CSharpGL对渲染框架做了修改,清理一些别扭的内容(DoRender()前后的事件都去 ...

  8. Spring Batch在大型企业中的最佳实践

    在大型企业中,由于业务复杂.数据量大.数据格式不同.数据交互格式繁杂,并非所有的操作都能通过交互界面进行处理.而有一些操作需要定期读取大批量的数据,然后进行一系列的后续处理.这样的过程就是" ...

  9. 新思想、新技术、新架构——更好更快的开发现代ASP.NET应用程序

    在博客园学习很长时间了,今天终于自己也开通了博客,准备分享一些感悟和经验.首先感谢博客园园主提供了这么好的程序员学习交流平台,也非常感谢张善友.dax.net.netfocus.司徒正美 等技术大牛的 ...

  10. 在PC上测试移动端网站和模拟手机浏览器的5大方

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...