WeiWeiXinNet/Games/game3/js/other/BMPCanvas.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

//(c) 2010 Grant Galitz
//The script acts as a drop-in substitution for the HTML5 canvas tag's putImageData function (Some configuration required ;) ).
//You need from base64.js the functions base64, to_byte, to_little_endian_word, and to_little_endian_dword for this to work.
//It's recommended that you do a try / catch statement, where this script is called in the catch,
//and testing of HTML5 Canvas putImageData is in the try.
//Thank you Wikipedia for the info needed to make this. :D

/*
	Note:
		- Opera limits data URIs to 4 KB.
		- IE 8 limits data URIs to 32 KB.
	This is why there's tiling in the first place!
	In order to not "go over the size limit", you must set a high enough tile count in each direction!
*/

//Create a new BMPCanvas object:
function BMPCanvas(canvas, canvasWidth, canvasHeight, imageX, imageY) {
	/*What's required:
		- A container element that can hold <img> tags.
		- The width of the complete image (The image can be stretched by CSS still!).
		- The height of the complete image (The image can be stretched by CSS still!).
		- The number of tiles horizontally (The width of the complete image must be evenly divisible by this (no remainder)!).
		- The number of tiles vertically (The height of the complete image must be evenly divisible by this (no remainder)!).
		Notes:
			- The number of tiles each direction has to fit into such direction's pixel count,
			since this script can't specially configure the "remainder" tile's width/height.
	*/
	if (canvas.getElementsByTagName("img").length == 0) {
		//Make sure an image tag is present in the container.
		canvas.appendChild(document.createElement("img"));
	}
	this.canvas = canvas.getElementsByTagName("img");	//An array of img DOM elements (Tries to see how many <img> tags are in a container element).
	this.completeWidth = Math.ceil(canvasWidth);		//The width of the full image (Ceil'd to force it as a integer).
	this.completeHeight = Math.ceil(canvasHeight);		//The height of the full image (Ceil'd to force it as a integer).
	this.imageX = (imageX > 0) ? Math.ceil(imageX) : 1;	//How many tiles horizontally (Ceil'd to force it as a integer).
	this.imageY = (imageY > 0) ? Math.ceil(imageY) : 1;	//How many tiles vertically (Ceil'd to force it as a integer).
	this.tileCount = this.imageX * this.imageY;			//Total number of tiles
	this.width = this.completeWidth / this.imageX;		//The computed width of a tile.
	this.height = this.completeHeight / this.imageY;	//The computed height of a tile.
	this.buffersChanged	= [];							//Used to determine whether a redraw is needed.
	this.buffers = [];									//Tile buffer data.
	this.blankTileArray = [];							//Used to reset the tracker array for the buffers.
	this.padAmount = (this.width % 4);					//Used to determine how many padding bytes are needed every tile line.
	if ((this.completeWidth % this.imageX > 0) || (this.completeHeight % this.imageY > 0)) {
		//Vital Parameter Check
		throw(new Error("A dimension must be divisible by the dimension's tile count."));
	}
	if (this.completeWidth < 1 || this.completeHeight < 1) {
		//Dimension Parameter Check
		throw(new Error("A dimension must be a positive integer greater than zero."));
	}
	this.initializeCanvas();
}
//Split up the full image into separate tiles, in order to keep the data URIs below browser-set maximum sizes.
BMPCanvas.prototype.putImageData = function (buffer, x, y) {	//x and y do nothing here (I don't even need them).
	/*Buffer Explaination:
		- The buffer is an array consisting of RGBA values.
		- Each value is a number that's one byte length unsigned.
		- The 'Alpha' is ignored, it's just to provide compatibility with the CanvasPixelArray object.
	*/