HTML5自学笔记[ 24 ]canvas绘图之星空草地

 <!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绘图之星空草地的更多相关文章

HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

DIV的表单布局
表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...
axis2通过wsdl生成客户端程序并本地调用
wsdl2java -uri http://10.0.5.12/brm/services/RuleEngine1374389539674484?wsdl -p east.mvc.webservice. ...
ubuntu下php xdebug的安装(配置)
首先Xdebug要和php版本对应,具体查看官网 https://xdebug.org/ xdebug-2.1.0PHP Version 5.3.10linux下解压xdebug包.1.进入xd ...
Know How To Use Check Box Mapping Of Other Values Property In Oracle Forms
Check Box Mapping of Other Values specifies how any fetched or assigned value that is not one of the ...
线程入门之优先级priority
package com.thread; /** * 优先级: * Thread.MAX_PRIORITY:最大优先级 10 * Thread.MIN_PRIORITY:最小优先级 1 * Thread ...
Codeforces Round #135 (Div. 2) E. Parking Lot 线段数区间合并
E. Parking Lot time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
CSS笔记（十二）CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法函数描述 matrix(n,n,n,n,n,n) 定义 ...
11 Indexes
本章提要--------------------------------------索引会影响 DML 与 select 操作, 要找到平衡点最好从一开始就创建好索引索引概述B*索引其他一些索引索引使 ...
mysql 有关的文件
1.在linux上安装好mysql之后,存在很多mysql有关的文件. 2./etc/rc.d/init.d/mysql 是mysql服务的启动脚本,是对mysqld_safe的封装,mysqld_s ...
js object（对象）
http://www.cnblogs.com/pingchuanxin/p/5773326.html Object(对象)是在所有的编程语言中都十分重要的一个概念,对于事物我们可以把他们看作是一个对象 ...

HTML5自学笔记[ 24 ]canvas绘图之星空草地

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

随机推荐

热门专题