<!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. 基础！winForm客户端最常用的几个基本属性

    客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序特点:不需要联网也可以打开使用部分功能但是现在的情况是许多功能依然需要互联网的支持 代码部分在用户电脑上执行 WinForm常用窗体属性: 布 ...

  2. [HDOJ5783]Divide the Sequence（贪心）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5783 题意:给n个数,要求划分成多个段,使得每一个段的任意前缀和都不小于0. 从后往前截取,这样不会影 ...

  3. Python-爬虫初学

    #爬取网站中的图片 1 import re #正则表达式库 import urllib #url链接库 def getHtml(url): page = urllib.urlopen(url) #打开 ...

  4. CSS深入研究:display的恐怖故事解密(2) - table-cell(转)

    http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - ...

  5. iOS - OC NSNumber 数字

    前言 @interface NSNumber : NSValue @interface NSDecimalNumber : NSNumber 将基本数据类型包装成 OC 对象 1.NSNumber 与 ...

  6. iOS - Swift Swift 语言新特性

    1.Swift 2.0 带来哪些新变化 常规变化: 1.OS X 10.11.iOS 9 和 watchOS 2 SDK 采纳了一些 Objective-C 的特性用来提高 Swift 的编程体验, ...

  7. iOS - UIActivityViewController

    前言 NS_CLASS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED @interface UIActivityViewController : UIViewControl ...

  8. [转载] Linux下高并发socket最大连接数所受的各种限制

    原文: http://mp.weixin.qq.com/s?__biz=MzAwNjMxNjQzNA==&mid=207772333&idx=1&sn=cfc8aadb422f ...

  9. 构件工具Maven----坐标、依赖、仓库、生命周期的简单学习

    这篇文章对Maven中几个比较重要的概念坐标.依赖.仓库.生命周期做一个简单的介绍. 1.关于Maven坐标 用来区别Maven世界中任何一个构件,Maven坐标的元素包括groupId.artifa ...

  10. postgresql如何实现group_concat功能

    MySQL有个聚集函数group_concat, 它可以按group的id,将字段串联起来,如 表:id name---------------1 A2 B1 B SELECT id, group_c ...