<!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. TC SRM633

    第三题:n个数字,有m个限制,每个限制给出某两个数字的Gcd或者Lcm为多少.最后问这样的n个数存在否. 思路:我们发现,对于素数p1,p2,n个数中每个数含有多少个p1,p2是没有联系的,因此每个素 ...

  2. [HDOJ5952]Counting Cliques（DFS，剪枝）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5952 题意:求图中规模为s的团的个数. DFS+剪枝,姿势不好很容易TLE啊. #include &l ...

  3. 对MSP430单片机__delay_cycles精确延时的说明及改正

    在这里, 我来讨论一下关于MSP430单片机使用__delay_cycles延时的问题. IAR for MSP430编译器提供了一个编译器内联的精确延时函数(并非真正的函数)以提供用户精确延时使用, ...

  4. Sencha Toucha之Ext.Ajax

    Ext.Ajax是Ext.data.Connection的hi一个单实例,不需要使用new或者Ext.create方法创建实例后再使用. 类的继承关系为: Ext.Base Ext.data.Conn ...

  5. 03_Spring工厂接口

    Spring工厂接口 1.BeanFactory 接口 和 ApplicationContext 接口区别 ?      * ApplicationContext 接口继承BeanFactory接口, ...

  6. SQL判断临时表是否存在

    IF EXISTS(select * from tempdb..sysobjects where id=object_id('tempdb..#tb')) BEGIN DROP TABLE #tb E ...

  7. poj 3348--Cows(凸包求面积)

    链接:http://poj.org/problem?id=3348 Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions:  ...

  8. Python入门-引号

    Python 接收单引号(' ),双引号(" ),三引号(''' """) 来表示字符串,引号的开始与结束必须的相同类型的. 其中三引号可以由多行组成,编写多行 ...

  9. Binding的源与路径

    1.把控件作为Binding的源 例子:拖动Slider,输入框中的值也会跟着改变,或在输入框中输入数值,滑动条也会自动移动 <Window x:Class="把控件作为Binding ...

  10. unity3d vs2012

    Unity3D自带的MonoDevelop编辑器无论是js还是c#代码提示都很差,很诡异的就是变量名和方法名有的时候提示有的时候不提示.不过用Visual Studio代替MonoDevelop这个问 ...