1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.  
  7.      <style>
  8.          body{ background:#fff;}
  9.          div{ width:800px; height:600px; margin:0 auto;}
  10.          canvas{ background:#000;}
  11.      </style>
  12.      <script src="drawstars.js"></script>
  13.  </head>
  14.  <body>
  15.      <div>
  16.          <canvas id="canvas1" width="800" height="600"></canvas>
  17.      </div>
  18.  </body>
  19.  </html>
  1.  window.onload = function(){
  2.  
  3.      var cvs = document.getElementById('canvas1');
  4.      var cxt = cvs.getContext('2d');
  5.      var R;
  6.  
  7.      var lineGrad = cxt.createRadialGradient(cvs.width/2,cvs.height,0,cvs.width/2,cvs.height,cvs.width);
  8.      lineGrad.addColorStop(0,'#191970');
  9.      lineGrad.addColorStop(1,'#000');
  10.      cxt.fillStyle = lineGrad;
  11.      cxt.fillRect(0,0,cvs.width,cvs.height);
  12.  
  13.      //星星
  14.      for(var i=0;i<100;i++){
  15.          R = 2+5*Math.random();
  16.          drawStar(cxt,cvs.width*Math.random(),cvs.height*0.7*Math.random(),R,'#FFFF00');
  17.      }
  18.  
  19.      //月亮
  20.      drawMoon(cxt,600,100,40,3,30,'#FFF68F')
  21.  
  22.      //草地
  23.      cxt.save();
  24.  
  25.      cxt.beginPath();
  26.      cxt.moveTo(0,400);
  27.      cxt.bezierCurveTo(200,300,500,500,800,450);
  28.      cxt.lineTo(800,600);
  29.      cxt.lineTo(0,800);
  30.      cxt.closePath();
  31.  
  32.      cxt.fillStyle = 'green';
  33.      cxt.fill();
  34.  
  35.      cxt.restore();
  36.  
  37.  }
  38.  
  39.  function drawMoon(cxt,x,y,r,d,rot,fillColor){
  40.      cxt.save();
  41.  
  42.      cxt.translate(x,y);
  43.      cxt.scale(r,r);
  44.      cxt.rotate(rot*Math.PI/180);
  45.  
  46.      moonPath(cxt,d);
  47.  
  48.      cxt.fillStyle = 'yellow' || fillColor;
  49.  
  50.      cxt.fill();
  51.  
  52.      cxt.restore();
  53.  }
  54.  
  55.  function moonPath(cxt,d){
  56.      cxt.beginPath();
  57.      cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
  58.      cxt.moveTo(0,-1);
  59.      cxt.arcTo(d,0,0,1,Math.sqrt(1+d*d)/d);
  60.  }
  61.  
  62.  function drawStar(cxt,x,y,R,fillColor){
  63.      cxt.save();
  64.  
  65.      cxt.translate(x,y);
  66.      cxt.rotate(360*Math.random()*Math.PI/180);
  67.      cxt.scale(R,R);
  68.  
  69.      starPath(cxt);
  70.  
  71.      cxt.fillStyle = fillColor;
  72.  
  73.      cxt.fill();
  74.      cxt.restore();
  75.  
  76.  }
  77.  function starPath(cxt){
  78.      cxt.beginPath();
  79.      for(var i=0;i<5;i++){
  80.          cxt.lineTo(Math.cos((18+72*i)*Math.PI/180),-Math.sin((18+72*i)*Math.PI/180));
  81.          cxt.lineTo(Math.cos((54+72*i)*Math.PI/180)*0.5,-Math.sin((54+72*i)*Math.PI/180)*0.5);
  82.      }
  83.      cxt.closePath();
  84.  }

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

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. Spring 框架 详解 （一）

    Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 * 分层: * SUN提供的EE的三层结构:web层.业务层.数据访问层(持久层,集成层) * Struts2是 ...

  2. 04-23 Android 课堂笔记

    1.调用 //暂停 @Override protected void onPause() { super.onPause(); Log.e("TAG", "onPause ...

  3. 曲线救国，解决Mac系统下，Android sdk下载失败的问题

    Mac下翻_墙的问题 话说GFW屏蔽谷歌已经有一阵子了,最近打算在Mac系统下折腾个Android应用,备好了IDE,只欠SDK,无奈下载时因为GFW的缘故,总是失败,我心痛哉! 由于本人偏爱Mac系 ...

  4. python基础字符串操作

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

  5. FZU 2212 Super Mobile Charger（超级充电宝）

    [Description] [题目描述] While HIT ACM Group finished their contest in Shanghai and is heading back Harb ...

  6. Linux简介与厂商版本

    Linux简介与厂商版本   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 1. Linux简介 Linux可以有狭义和广义两种 ...

  7. Python基础学习笔记（三）运算符

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-chinese-encoding.html 3. http://w ...

  8. Intel微处理器学习笔记（五） 中断

    ▼ 中断是一个由硬件激发的过程,它中断当前正在执行的任何程序. ▼ 在Intel系列微处理器中,包括INTR和NMI(Non Maskable Interrupt)两个申请中断的引脚和一个响应INTR ...

  9. centos中更换jdk的版本

    现在讲的是Linux中更换jdk版本的问题,卸载Linux自带的jdk更换sun的jdk百度一大堆,但是如果我安装的sun的jdk是1.7的想更换到1.8的如何解决呢,方法其实超easy. 把1.8的 ...

  10. 升级MySQL支持utf8mb4字符集详细步骤

    原文:http://lib.csdn.net/article/mysql/4607 第一步:全备份所有数据库 [root@openfire1 mysql]# mysqldump -u root -p ...