RequireJS是符合AMD规范（Asynchronous module definition异步模块加载）一种js加载方式，目的是为了防止加载js的时候阻塞html页面渲染，其使用非常简单。
首先要去下载一个require.js，网址：http://requirejs.org/docs/download.html
在html文件中引入require.js：
代码语言：javascript复制 <script type="text/javascript" data-main="js/main" src="js/require.js" defer async="true"></script>data-main指向模块加载的主文件，defer async="true"设置当前script加载方式为异步加载。
在调用其他模块之前可以先用require.config配置一下模块的路径
代码语言：javascript复制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模块的时候按照以下写法：
代码语言：javascript复制require(['jquery'], function ($){
//代码块
}); require第一个参数传入调用的模块名，可以为字符串（单个模块）或者数组（多个模块），function参数列表为调用的模块名，在function代码块中我们自定义代码。
require.js定义函数的格式如下:
代码语言：javascript复制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:
代码语言：javascript复制<!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:
代码语言：javascript复制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:
代码语言：javascript复制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();
});
});下面来看一下绘制的结果：
