<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>

     <style>
         body{ background:#fff;}
         div{ width:800px; height:600px; margin:0 auto;}
         canvas{ background:#000;}
     </style>
     <script src="drawstars.js"></script>
 </head>
 <body>
     <div>
         <canvas id="canvas1" width="800" height="600"></canvas>
     </div>
 </body>
 </html>
 window.onload = function(){

     var cvs = document.getElementById('canvas1');
     var cxt = cvs.getContext('2d');
     var R;

     var lineGrad = cxt.createRadialGradient(cvs.width/2,cvs.height,0,cvs.width/2,cvs.height,cvs.width);
     lineGrad.addColorStop(0,'#191970');
     lineGrad.addColorStop(1,'#000');
     cxt.fillStyle = lineGrad;
     cxt.fillRect(0,0,cvs.width,cvs.height);

     //星星
     for(var i=0;i<100;i++){
         R = 2+5*Math.random();
         drawStar(cxt,cvs.width*Math.random(),cvs.height*0.7*Math.random(),R,'#FFFF00');
     }

     //月亮
     drawMoon(cxt,600,100,40,3,30,'#FFF68F')

     //草地
     cxt.save();

     cxt.beginPath();
     cxt.moveTo(0,400);
     cxt.bezierCurveTo(200,300,500,500,800,450);
     cxt.lineTo(800,600);
     cxt.lineTo(0,800);
     cxt.closePath();

     cxt.fillStyle = 'green';
     cxt.fill();

     cxt.restore();

 }

 function drawMoon(cxt,x,y,r,d,rot,fillColor){
     cxt.save();

     cxt.translate(x,y);
     cxt.scale(r,r);
     cxt.rotate(rot*Math.PI/180);

     moonPath(cxt,d);

     cxt.fillStyle = 'yellow' || fillColor;

     cxt.fill();

     cxt.restore();
 }

 function moonPath(cxt,d){
     cxt.beginPath();
     cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
     cxt.moveTo(0,-1);
     cxt.arcTo(d,0,0,1,Math.sqrt(1+d*d)/d);
 }

 function drawStar(cxt,x,y,R,fillColor){
     cxt.save();

     cxt.translate(x,y);
     cxt.rotate(360*Math.random()*Math.PI/180);
     cxt.scale(R,R);

     starPath(cxt);

     cxt.fillStyle = fillColor;

     cxt.fill();
     cxt.restore();

 }
 function starPath(cxt){
     cxt.beginPath();
     for(var i=0;i<5;i++){
         cxt.lineTo(Math.cos((18+72*i)*Math.PI/180),-Math.sin((18+72*i)*Math.PI/180));
         cxt.lineTo(Math.cos((54+72*i)*Math.PI/180)*0.5,-Math.sin((54+72*i)*Math.PI/180)*0.5);
     }
     cxt.closePath();
 }

该实例来自慕课网的学习，感兴趣的朋友可以去学习一下哦~

HTML5自学笔记[ 24 ]canvas绘图之星空草地的更多相关文章

  1. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  5. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

  1. ubuntu vi/vim编辑器必知必会

    转载出处:http://blog.csdn.net/xiajun07061225/article/details/7039413 一.我们为什么要学习vim编辑器? Linux的命令行界面下面有非常多 ...

  2. Python字符串、元组、列表、字典互相转换的方法

    直接上代码!!!   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  3. window--窗口

    创建窗口 1. 通过标签窗口窗口. <div id="win" class="easyui-window" title="My Window&q ...

  4. C语言文法定义与C程序的推导过程

    program à external_declaration | program external_declaration <程序> ->  <外部声明> |  < ...

  5. autofs实现nfs自动挂载

    apt-get install autofs 主配置文件/etc/auto.master 副配置文件可以在之配置文件中自定义 能生效的配置文件如下例: 将/usr/local/nginx/html挂载 ...

  6. STORM_0004_windows下zookeeper的伪集群的搭建

    -----------------------------------------------------START------------------------------------------ ...

  7. Perl 中 Pod 的基本用法。

    1. Pod 语法 pod中用段分可以分为三种,普通段落,字面段落(Verbatim Paragraph)和命令段落.三者的区分非常简单,以=pod|head1|cut|over等指示字开始的段落为命 ...

  8. XAF应用开发教程(二)业务对象模型之简单类型属性

    使用过ORM的朋友对这一部分理解起来会非常快,如果没有请自行补习吧:D. 不说废话,首先,我们来开发一个简单的CRM系统,CRM系统第一个信息当然是客户信息.我们只做个简单 的客户信息来了解一下XAF ...

  9. php 判断 xml 里是否存在某个节点

    参考网址:http://blog.csdn.net/crazyboy2005/article/details/6114454 DOMDocument中,怎样判断某节点是否存在呢? /* $xml-&g ...

  10. SQL笔记(1)索引/触发器

    --创建聚集索引 create clustered index ix_tbl_test_DocDate on tbl_test(DocDate) GO --创建非聚集索引 create nonclus ...