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. Android之SAX解析XML

    一.SAX解析方法介绍 SAX(Simple API for XML)是一个解析速度快并且占用内存少的XML解析器,非常适合用于Android等移动设备. SAX解析器是一种基于事件的解析器,事件驱动 ...

  2. ORA-00821: Specified value of sga_target 3072M is too small, needs to be at least 12896M

    在测试PlateSpine克隆的数据库服务器时,由于资源有限,克隆过来的数据库服务器只给了9G的内存,结果在测试时,老是会出现OOMkiller导致宕机,即out of memory killer,是 ...

  3. Ubuntu下开启php调试模式,显示报错信息

    在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示“无法处理此请求的错误提示”,这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置 ...

  4. 网站缓存技术总结( ehcache、memcache、redis对比)

    网站技术高速发展的今天,缓存技术已经成为大型网站的一个关键技术,缓存设计好坏直接关系的一个网站访问的速度,以及购置服务器的数量,甚至影响到用户的体验. 网站缓存按照存放的地点不同,可以分为客户端缓存. ...

  5. mono for android 读取网络远程图片

    布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=& ...

  6. Spark笔记:RDD基本操作(上)

    本文主要是讲解spark里RDD的基础操作.RDD是spark特有的数据模型,谈到RDD就会提到什么弹性分布式数据集,什么有向无环图,本文暂时不去展开这些高深概念,在阅读本文时候,大家可以就把RDD当 ...

  7. mysql 列名中 包含斜杠或者空格的处理方式

    今天客户那边遇到了一个比较奇葩的问题跑来问我,这个问题比较冷门,所以特别记录下. 问题描述 数据库的字段存在斜杠或者空格的时候,怎么用sql进行insert或者select操作. 问题解答 对于这种特 ...

  8. vue源码解析阅读列表

    https://zhuanlan.zhihu.com/p/24435564 开发vue(或类似的MVVM框架)的过程中,需要面对的主要问题有哪些? 剖析vue实现原理,自己动手实现mvvm 官网介绍

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

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

  10. 创建 Monitor 并测试 - 每天5分钟玩转 OpenStack(124)

    前面我们创建了 Pool,VIP 并添加了 Member.今天将创建 Monitor,然后测试 LBaaS 是否能够正常工作. 创建 Monitor LBaaS 可以创建 monitor,用于监控 P ...