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();
});
});
下面来看一下绘制的结果: