<!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. android MSM8974 上DeviceTree简介

    简介 主要功能是不在代码中硬编码设备信息,而是用专门的文件来描述.整个系统的设备节点会形成一个树,设备节点里可以设置属性.官网在http://www.devicetree.org .入门指南请参考ht ...

  2. Android 基础

    1. 安卓的平台构建 例如我的手机 内核版本就是ubuntu  为手机硬件提供各种驱动. 架构的简单理解: Application(应用程序层) 我们一般说的应用层的开发就是在这个层次上进行的,当然包 ...

  3. Upgrade R （升级R语言）

    R R version 3.1.1 (2014-07-10) -- "Sock it to Me" yum list installed | grep R R-core.x86_6 ...

  4. [Java解惑]异常

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. FZU 2216 The Longest Straight（最长直道）

    Description 题目描述 ZB is playing a card game where the goal is to make straights. Each card in the dec ...

  6. js实现页面传值

    今天做东西用到,在网上查到了这样的一种方法,学习学习: 来源:http://bbs.csdn.net/topics/310229114 Page1: <!DOCTYPE html PUBLIC ...

  7. C#线程系列讲座(5)：同步技术之Monitor

    在上一讲介绍了使用lock来实现线程之间的同步.实际上,这个lock是C#的一个障眼法,在C#编译器编译lock语句时,将其编译成了调用Monitor类.先看看下面的C#源代码: public sta ...

  8. CSS中应用position的absolute和relative的属性制作浮动层

    我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...

  9. Redis基础知识之——自定义封装单实例和普通类Redis

    一.普通Redis实例化类: class MyRedis { private $redis; public function __construct($host = '121.41.88.209', ...

  10. poj1474Video Surveillance(半平面交）

    链接 半平面交的模板题,判断有没有核.: 注意一下最后的核可能为一条线,面积也是为0的,但却是有的. #include<iostream> #include <stdio.h> ...