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

首先要去下载一个require.js，网址：

在html文件中引入require.js：

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:

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

index.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
    
     浅绿		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();	});});

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