requireJs的使用,以canvas繪製星空爲例

時間 2020-08-08

標籤 requirejs 使用 canvas 繪製星空爲例欄目 JavaScript 简体版

原文原文鏈接

RequireJS是符合AMD規範（Asynchronous module definition異步模塊加載）一種js加載方式，目的是爲了防止加載js的時候阻塞html頁面渲染，其使用很是簡單。javascript

首先要去下載一個require.js，網址：http://requirejs.org/docs/download.htmlcss

在html文件中引入require.js：html

<script type="text/javascript" data-main="js/main" src="js/require.js" defer async="true"></script>

data-main指向模塊加載的主文件，defer async="true"設置當前script加載方式爲異步加載。java

在調用其餘模塊以前能夠先用require.config配置一下模塊的路徑jquery

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"]canvas

jquery設置模塊的引用名, ["https://code.jquery.com/jquery-2.2.3.min","jquery.min"] 設置jquery模塊的路徑，裏面填寫多個備選路徑，若是前面的路徑不可訪問則使用後面的路徑。api

在使用js模塊的時候按照如下寫法：數組

require(['jquery'], function ($){
   //代碼塊
});

require第一個參數傳入調用的模塊名，能夠爲字符串（單個模塊）或者數組（多個模塊），function參數列表爲調用的模塊名，在function代碼塊中咱們自定義代碼。dom

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

下面來看一下繪製的結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。