专栏首页lonelydawn的前端猿区requireJs的使用,以canvas绘制星空为例

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 绚丽的javascript拾色器(不兼容IE8及以下)

    一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

    lonelydawn
  • 一款不可多得的火柴时钟

    ? 火柴时钟 一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。 引用 <link rel=...

    lonelydawn
  • WebStorm 下载 & 破解 & 汉化

    WebStorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最...

    lonelydawn
  • canvas画简单电路图

    用户1749219
  • canvas学习总结四:绘制虚线

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135...

    六小登登
  • canvas学习总结三:绘制路径-线段

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135...

    六小登登
  • canvas学习总结五:线段的端点与连接点

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135...

    六小登登
  • Html5实现手机九宫格密码解锁功能

    HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!

    业余草
  • Elastic Stack日志收集系统笔记 (logstash部分)

    Logstash管道有两个必需的元素,input和output,以及一个可选的元素filter。输入插件使用来自源的数据,过滤器插件在您指定时修改数据,输出插件...

    没有故事的陈师傅
  • 【2019年8月】OCP 071认证考试最新版本的考试原题-第22题

    Which two statements are true about transactions in the Oracle Database serve?

    用户5892232

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动