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(); }); });

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


requireJs的使用,以canvas绘制星空为例 - lonelydawn - 开源中国社区

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 开源AMD矩形
分页:12
转载请注明
本文标题:requireJs的使用,以canvas绘制星空为例 - lonelydawn - 开源中国社区
本站链接:http://www.codesec.net/view/482692.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(57)