HTML5 canvas绘图夜空小屋

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

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

效果图如下：

代码如下：

  1.  <!doctype html>
  2.  <html>
  3.  <head><meta name="viewport" content="width=device-width, initial-scale=1" />
  4.  <title>HTML5 Canvas绘制恬静夜景? - 何问起</title><base target="_blank" />
  5.  <meta charset="utf-8">
  6.  <style>*{margin:0px;padding:0px;}body{text-align:center;}a{color:#333333;}</style>
  7.  </head>
  8.  
  9.  <body>
  10.  <div><h2>何问起：程序媛，攻城狮，入夜了，睡觉啦......</h2>
  11.  </div>
  12.  <canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">
  13.  何问起提醒：此浏览器不支持canvas，请更换浏览器
  14.  </canvas>
  15.  <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>
  16.  
  17.  <script>
  18.  
  19.  hovertreenight(); setInterval(hovertreenight, 4000);
  20.  
  21.  function hovertreenight () {
  22.  canvas = document.getElementById('hove'+'rtreecanvas');
  23.  canvas.width=1000;
  24.  canvas.height=560;
  25.  context=canvas.getContext('2d');
  26.  
  27.  drawing(context);
  28.  drawing_start_1(context);
  29.  drawing2(context);
  30.  
  31.  go();
  32.  draw_moon(context);
  33.  draw_moon2(context);
  34.  draw_moon3(context);
  35.  }
  36.  
  37.  function go(){
  38.  
  39.  for(var i=0;i<100;i++){
  40.  var r=Math.random()*10+3;
  41.  var x=Math.random()*1000;
  42.  var y=Math.random()*300;
  43.  var a=Math.random()*360;
  44.  drawing_start_2(context,x,y,r,r/2.0,a);
  45.  
  46.  }
  47.  
  48.  }
  49.  
  50.  function draw(cxt){
  51.  cxt.beginPath();
  52.  for(i=0;i<56;i++){
  53.  cxt.moveTo(0,i*20);
  54.  cxt.lineTo(1000,i*20);
  55.  cxt.stroke();
  56.  }
  57.  }
  58.  
  59.  function draw2(cxt){
  60.  cxt.beginPath();
  61.  for(i=0;i<56;i++){
  62.  cxt.moveTo(i*20,0);
  63.  cxt.lineTo(i*20,560);
  64.  cxt.stroke();
  65.  }
  66.  }
  67.  
  68.  function drawing(cxt){ //画整体背景颜色渐变
  69.  var linearGrad=cxt.createLinearGradient(500,0,500,540);
  70.  linearGrad.addColorStop(0.0,'black');
  71.  linearGrad.addColorStop(1.0,'blue');
  72.  cxt.fillStyle=linearGrad;
  73.  cxt.fillRect(0,0,1000,540);
  74.  cxt.fill();
  75.  }
  76.  
  77.  function drawing2(cxt){ //画房子
  78.  cxt.beginPath();
  79.  cxt.moveTo(0,540);
  80.  cxt.lineTo(1000,540);
  81.  cxt.lineTo(1000,560);
  82.  cxt.lineTo(0,560);
  83.  cxt.closePath();
  84.  cxt.fillStyle="black";
  85.  cxt.fill();
  86.  cxt.stroke();
  87.  
  88.  cxt.beginPath();
  89.  cxt.moveTo(200,540);
  90.  cxt.lineTo(360,540);
  91.  cxt.lineTo(360,480);
  92.  cxt.lineTo(200,480);
  93.  cxt.closePath();
  94.  cxt.fillStyle="black";
  95.  cxt.fill();
  96.  cxt.stroke();
  97.  
  98.  cxt.beginPath();
  99.  cxt.moveTo(120,480);
  100.  cxt.lineTo(280,420);
  101.  cxt.lineTo(440,480);
  102.  cxt.closePath();
  103.  cxt.fillStyle="black";
  104.  cxt.fill();
  105.  cxt.stroke();
  106.  
  107.  cxt.beginPath();
  108.  cxt.moveTo(320,435);
  109.  cxt.lineTo(320,420);
  110.  cxt.lineTo(340,420);
  111.  cxt.lineTo(340,442);
  112.  cxt.closePath();
  113.  cxt.fillStyle="black";
  114.  cxt.fill();
  115.  cxt.stroke();
  116.  
  117.  cxt.beginPath();
  118.  cxt.moveTo(240,520);
  119.  cxt.lineTo(260,520);
  120.  cxt.lineTo(260,500);
  121.  cxt.lineTo(240,500);
  122.  cxt.closePath();
  123.  cxt.fillStyle="yellow";
  124.  cxt.fill();
  125.  cxt.stroke();
  126.  
  127.  cxt.beginPath();
  128.  cxt.moveTo(240,510);
  129.  cxt.lineTo(260,510);
  130.  cxt.moveTo(250,500);
  131.  cxt.lineTo(250,520);
  132.  cxt.closePath();
  133.  cxt.stroke();
  134.  }
  135.  
  136.  function drawing_start_1(cxt){ //星星背景
  137.  cxt.beginPath();
  138.  cxt.rect(0,0,1000,550);
  139.  cxt.closePath();
  140.  
  141.  cxt.stroke();
  142.  }
  143.  
  144.  function drawing_start_2(cxt,x,y,outerR,innerR,rot){ //画星星 何问起
  145.  
  146.  cxt.beginPath();
  147.  for(var i=0;i<5;i++){
  148.  cxt.lineTo((Math.cos(18+i*72-rot)/180*Math.PI)*outerR+x,
  149.  -Math.sin((18+i*72-rot)/180*Math*outerR+y));
  150.  
  151.  cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
  152.  -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
  153.  }
  154.  cxt.fillStyle="#cf3"
  155.  cxt.fill();
  156.  cxt.closePath();
  157.  cxt.stroke();
  158.  }
  159.  
  160.  function draw_moon(cxt){ //画月亮 hovertree.com
  161.  cxt.beginPath();
  162.  cxt.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
  163.  cxt.bezierCurveTo(140, 119, 93, 224, 169, 295);
  164.  cxt.fillStyle="#ddd";
  165.  cxt.fill();
  166.  cxt.stroke();
  167.  }
  168.  
  169.  function draw_moon2(cxt){ //月亮的眼睛。。。
  170.  cxt.beginPath();
  171.  cxt.moveTo(110,180);
  172.  cxt.lineTo(115,180);
  173.  cxt.stroke();
  174.  }
  175.  
  176.  function draw_moon3(cxt){ //zzz...
  177.  cxt.beginPath();
  178.  cxt.moveTo(40,80);
  179.  cxt.lineTo(60,80);
  180.  cxt.lineTo(40,100);
  181.  cxt.lineTo(60,100);
  182.  cxt.strokeStyle="yellow"
  183.  cxt.stroke();
  184.  
  185.  cxt.beginPath();
  186.  cxt.moveTo(63,108);
  187.  cxt.lineTo(80,108);
  188.  cxt.lineTo(63,123);
  189.  cxt.lineTo(80,123);
  190.  cxt.strokeStyle="yellow"
  191.  cxt.stroke();
  192.  
  193.  cxt.beginPath();
  194.  cxt.moveTo(86,130);
  195.  cxt.lineTo(100,130);
  196.  cxt.lineTo(86,142);
  197.  cxt.lineTo(100,142);
  198.  cxt.strokeStyle="yellow"
  199.  cxt.stroke();
  200.  }
  201.  // http://www.cnblogs.com/jihua/p/webfront.html
  202.  </script>
  203.  
  204.  </body>
  205.  </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. 杂项之python描述符协议

    杂项之python描述符协议 本节内容 由来 描述符协议概念 类的静态方法及类方法实现原理 类作为装饰器使用 1. 由来 闲来无事去看了看django中的内置分页方法,发现里面用到了类作为装饰器来使用 ...

  2. centos7+mono4.2.3.4+jexus5.8.1跨平台起飞

    很早之前就开始关注.net跨平台,最近正好测试了下用EF6连接mysql,于是就想直接把网站扔进Linux.查了很多资料,鼓捣了两个晚上,终于成功. 这里我使用的是budgetvm的1G openvz ...

  3. Lesson 15 Good news

    Text The secretary told me that Mr. Harmsworth would see me. I felt very nervous when I went into hi ...

  4. Thinking in Unity3D：基于物理着色（PBS）的材质系统

    关于<Thinking in Unity3D> 笔者在研究和使用Unity3D的过程中,获得了一些Unity3D方面的信息,同时也感叹Unity3D设计之精妙.不得不说,笔者最近几年的引擎 ...

  5. 分享我对 ASP.NET vNext 的一些感受，也许多年回过头看 So Easy！

    写在前面 阅读目录: Visual Studio "14" CTP 关于 ASP.NET vNext ASP.NET vNext 实践 后记 ASP.NET vNext 发布已经过 ...

  6. Android Studio2.1.2 Java8环境下引用Java Library编译出错

    转载请注明出处:http://www.cnblogs.com/LT5505/p/5685242.html 问题:在Android Studio2.1.2+Java8的环境下,引用Java Librar ...

  7. 查看Job执行的历史记录

    SQL Server将Job的信息存放在msdb中,Schema是dbo,表名以“sysjob”开头. 一,基础表 1, 查看Job和Step,Step_ID 是从1 开始的. select j.jo ...

  8. 【Win 10应用开发】延迟加载图片的另一种方法

    上一篇文章中老周给大伙介绍了x:Phase和x:Bind的用法,并演示了一个延迟加载的示例.不过,那个例子会遗留一个问题,就是UI线程被阻塞,所以启动应用较慢. 如果希望图片可以延迟加载,或许我们可以 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

    系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...

  10. How do servlets work-Instantiation, sessions, shared variables and multithreading[reproduced]

    When the servletcontainer (like Apache Tomcat) starts up, it will deploy and load all webapplication ...