requireJs的使用,以canvas绘制星空为例

lonelydawn

发布于 2018-02-09 11:11:21

1.1K0

发布于 2018-02-09 11:11:21

文章被收录于专栏：lonelydawn的前端猿区lonelydawn的前端猿区

RequireJS是符合AMD规范（Asynchronous module definition异步模块加载）一种js加载方式，目的是为了防止加载js的时候阻塞html页面渲染，其使用非常简单。

首先要去下载一个require.js，网址：http://requirejs.org/docs/download.html

在html文件中引入require.js：

 <script type="text/javascript" data-main="js/main" src="js/require.js" defer async="true"></script>

data-main指向模块加载的主文件，defer async="true"设置当前script加载方式为异步加载。

在调用其他模块之前可以先用require.config配置一下模块的路径

require.config({
　　　　paths: {
　　　　　　"jquery": ["https://code.jquery.com/jquery-2.2.3.min","jquery.min"],
　　　　　　"common": "common"
　　　　}
});

"jquery": ["https://code.jquery.com/jquery-2.2.3.min","jquery.min"]

jquery设置模块的引用名, ["https://code.jquery.com/jquery-2.2.3.min","jquery.min"] 设置jquery模块的路径，里面填写多个备选路径，如果前面的路径不可访问则使用后面的路径。

在使用js模块的时候按照以下写法：

require(['jquery'], function ($){
   //代码块
});

require第一个参数传入调用的模块名，可以为字符串（单个模块）或者数组（多个模块），function参数列表为调用的模块名，在function代码块中我们自定义代码。

require.js定义函数的格式如下:

define(['jquery'],function(){
	var foo=function(){
	    //some code here
	};

	var foo2=function(arg1,arg2){
	    //some code here
	};
	
	return{
	    foo:foo,
	    foo2:foo2
	};

});

define()有两个参数，第一个参数可选，传入需要使用的模块，上面的common.js没有用到其他模块，所以第一个参数没有写，第二个参数为自定义函数的代码块。

下面是绘制canvas的代码。

canvas api:http://www.w3school.com.cn/tags/html_ref_canvas.asp

首先看一下html文件(包含基本dom节点和一个canvas节点，并引入require.js文件)

index.html:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script type="text/javascript" data-main="js/main" src="js/require.js" defer async="true"></script>
</body>
</html>

common模块是我自定义的一个js模块，里面包含了绘制canvas元素的各种函数（一切尽在注释中）

common.js:

define(function($){
	//获取文本对象
	var getContext=function(id,width,height){
		var canvas=document.getElementById(id);
		canvas.width=width;
		canvas.height=height;
		var context=canvas.getContext("2d");
		return context;
	};

	//绘制背景层
	var drawBackground=function(cxt,width,height){
		var grd=cxt.createLinearGradient(0,0,0,height);
		//设置渐变点（范围0-1，添加渐变色），在这里我们起始设置为黑色，渐变到墨蓝色
		grd.addColorStop(0,"black");
		grd.addColorStop(1,"#054696");
		//设置填充样式为设置好的渐变模式
		cxt.fillStyle=grd;
		//使用设置好的模式绘制矩形，在这里的矩形作为背景层
		cxt.fillRect(0,0,width,height);
	};

	//绘制地面
	var drawLand=function(cxt){
		//保存原有状态
		cxt.save();
		cxt.beginPath();
		//将画笔移至
		cxt.moveTo(0,500);
		//贝塞尔三次曲线函数绘制曲线
		cxt.bezierCurveTo(330,400,700,550,800,500);
		cxt.lineTo(800,600);
		cxt.lineTo(0,600);
		cxt.closePath();
		cxt.restore();

		//设置地面样式为渐变的绿色
		var landStyle=cxt.createLinearGradient(0,800,0,0);
		landStyle.addColorStop(0,"#040");
		landStyle.addColorStop(1,"#5a0");
		cxt.fillStyle=landStyle;
		cxt.fill();
	};

	//绘制num数量的星星
	var drawStars=function(cxt,num){
		cxt.fillStyle="yellow";
		for(var i=0;i<num;i++){
			//设置随机半径为3-8
			var R=Math.random()*5+3;
			//设置随机x坐标为10-790
			var x=Math.random()*780+10;
			//设置随机y坐标为6-354
			var y=(Math.random()*580+10)*3/5;
			// 设置随机旋转角度为0-72
			var angle=Math.random()*72;
			//设置五角星路径
			starPath(cxt,R,x,y,angle);
			//填充五角星路径
			cxt.fill();
		}
	};

	//建立五角星路径
	function starPath(cxt,R,x,y,angle){
		//beginPath()新建路径
		cxt.beginPath();
		//五角星有10个顶点，循环设置顶点
		for(var i=0;i<5;i++){

			cxt.lineTo(Math.cos((72*i+angle)*Math.PI/180)*R+x,Math.sin((72*i+angle)*Math.PI/180)*R+y);
			// 在这里使用小圆半径为大圆的一半
			cxt.lineTo(Math.cos((72*i+36+angle)*Math.PI/180)*R/2+x,Math.sin((72*i+36+angle)*Math.PI/180)*R/2+y);
		}
		//closePath()闭合路径
		cxt.closePath();
	};

	//绘制房子
	var drawHouse=function(cxt,x,y,scale){
		cxt.save();
		//图形变换更改坐标系原点所在
		cxt.translate(x,y);
		//图形变换进行缩放
		cxt.scale(scale,scale);

		//屋顶，三角形
		cxt.beginPath();
		cxt.moveTo(2.5,0);
		cxt.lineTo(0,4);
		cxt.lineTo(5,4);
		cxt.closePath();

		cxt.fillStyle="#b71";
		cxt.fill();

		//屋体，正方形
		cxt.fillStyle="#ddd";
		cxt.fillRect(0.5,4,4,4);
		
		//窗户，正方形
		cxt.fillStyle="#9de";
		cxt.fillRect(1,5,1,1);

		cxt.restore();
	};

	//绘制大树
	var drawTree=function(cxt,x,y,scale){
		cxt.save();
		cxt.translate(x,y);
		cxt.scale(scale,scale);

		//绘制树干
		cxt.fillStyle="#b71";
		cxt.fillRect(-0.2,0,0.4,2.5);

		//绘制树冠，圆
		cxt.beginPath();
		cxt.arc(0,0,1,0,2*Math.PI);
		cxt.closePath();

		//设置渐变色，深绿->浅绿
		var grd=cxt.createLinearGradient(0,2,0,0);
		grd.addColorStop(0,"#040");
		grd.addColorStop(1,"#5a0");
		cxt.fillStyle=grd;
		cxt.fill();
		
		cxt.restore();
	};

	var foo=function(){
		alert(1);
	};

	return{
		getContext:getContext,
		drawBackground:drawBackground,
		drawLand:drawLand,
		drawStars:drawStars,
		drawHouse:drawHouse,
		drawTree:drawTree,
		foo:foo
	};
});

之后我们在main.js中调用common模块对canvas进行绘制（一切尽在注释中）

main.js:

require.config({
	paths:{
		"jquery":"jquery.min",
		"common":"common"
	}
});

require(['common','jquery'],function(common,$){
	
	$(document).ready(function(){
		var context=common.getContext("canvas",800,600);
		//绘制渐变背景的矩形
		common.drawBackground(context,800,600);
		//绘制地面
		common.drawLand(context);
		//在背景层上面绘制200个五角星
		common.drawStars(context,200);
		//绘制房子
		common.drawHouse(context,100,400,10);
		//绘制大树
		common.drawTree(context,680,480,16);
		common.drawTree(context,720,460,25);

		// common.foo();
	});
});

下面来看一下绘制的结果：