HTML5 Canvas方块字放大特效

2024-09-05 12:18:44

字体：大中小

来源：转载

供稿：网友

闲来无事研究一下Canvas，主要是为了熟悉ImageData，围绕方块字的放大特效…… 圆润毛边和曲线什么的没去研究过，因为涉及到算法和画图方面的东西，不是用Canvas自己的画图命令来画图，不然就像AutoCAD里手动命令画图一样，计算好位置一步一步画就可以了…… 所以主要是奔着图像矩阵的ImageData作为练手的，纯粹无聊，写写玩而已……仅放大而已。

<!DOCTYPE html><html><head><title>HTML 5 方块字放大</title><style>canvas {background:lightgrey;}#main {border:solid 1px red;text-align:center;}#cvs  {border:solid 1px gray;}</style><script type="text/javascript">function instanceCanvas(cvsObj, cvsWidth, cvsHeight, arrOrgData, advOption){	this.Canvas = (typeof(cvsObj)=="object")?cvsObj:document.getElementById(cvsObj);	this.CanvasWidth = (typeof(cvsWidth)=="number")?cvsWidth:this.Canvas.width;	this.CanvasHeight = (typeof(cvsHeight)=="number")?cvsHeight:this.Canvas.height;	this.CanvasContext = this.Canvas.getContext("2d");	this.OriginImage = (typeof(arrOrgData)=="object")?arrOrgData:["BBBBB","WWBWW","WWBWW","WWBWW","BBWWW"];  this.ColorTable = {W:[255,255,255,255],D:[0,0,0,255],R:[255,0,0,255],G:[0,255,0,255],B:[0,0,255,255]};  this.ColorDefault = "W";  this.ColorMapFlag = false;  this.AdvancedOption = advOption;  this.offsetX = 0;  this.offsetY = 0;  this.cropOffsetX = 0;  this.cropOffsetY = 0;  // Initialization of the Canvas Instance  this.initCanvas = function(){  	this.ColorMapFlag = (typeof(this.OriginImage[0])=="string")?true:false;  	this.OriginHeight = this.OriginImage.length;  	this.OriginWidth = 0;  	for(var i=0;i<this.OriginHeight;i++){	    this.OriginWidth = (this.OriginImage[i].length > this.OriginWidth)?this.OriginImage[i].length:this.OriginWidth;    }    this.amplifierX = Math.round(this.CanvasWidth/this.OriginWidth);    this.amplifierY = Math.round(this.CanvasHeight/this.OriginHeight);    this.ExpandedImage = new Array();  }  // Expand the Image Array Data  this.expandImage = function(){  	if (this.ColorMapFlag){  	  for(var i=0;i<this.OriginHeight;i++){      	var tmpRow = "";      	for(var j=0;j<this.OriginImage[i].length;j++){      		var tmpChr = this.OriginImage[i][j];      		for(var k=0;k<this.amplifierX;k++){      			tmpRow+=tmpChr;      		}      	}      	for(var j=0;j<this.amplifierY;j++){      	  this.ExpandedImage.push(tmpRow);        }      }    } else {    	for(var i=0;i<this.OriginHeight;i++){      	var tmpRow = new Array();      	for(var j=0;j<this.OriginImage[i].length;j++){      		var tmpChr = this.OriginImage[i][j];      		for(var k=0;k<this.amplifierX;k++){      			tmpRow.push(tmpChr);      		}      	}      	for(var j=0;j<this.amplifierY;j++){      	  this.ExpandedImage.push(tmpRow);        }      }    }  }  // Update the Actual Image Data of Canvas  this.generateImageData = function(){  	this.Canvas.width = this.amplifierX*this.OriginWidth;  	this.Canvas.height = this.amplifierY*this.OriginHeight;  	this.drawWidth = this.Canvas.width;  	this.drawHeight = this.Canvas.height;  	var ctx = this.CanvasContext;  	var tmpImageData = ctx.createImageData(this.Canvas.width, this.Canvas.height);  	for(var i=0;i<tmpImageData.width*tmpImageData.height*4;i+=4){  		if (this.ColorMapFlag) {  			var clrIdx = this.ExpandedImage[Math.floor(i/(this.amplifierX*this.OriginWidth*4))][(i/4)%(this.amplifierX*this.OriginWidth)];  			if (typeof(this.ColorTable[clrIdx]) == "undefined") {          clrIdx = this.ColorDefault;          if (typeof(this.ColorTable[clrIdx]) == "undefined") {          	return false;          }        }  			var clrArr = this.ColorTable[clrIdx];  		} else {  			var clrArr = this.ExpandedImage[Math.floor(i/(this.amplifierX*this.OriginWidth*4))][(i/4)%(this.amplifierX*this.OriginWidth)];  		}  		// Here's is possible the location for addition calucation before assignment - this.AdvancedOption, etc  		// Currently Reserved by Saxon SI  		tmpImageData.data[i+0] = clrArr[0];	    tmpImageData.data[i+1] = clrArr[1];	    tmpImageData.data[i+2] = clrArr[2];	    tmpImageData.data[i+3] = clrArr[3];  	}  	this.CanvasImage = tmpImageData;  	return true;  }  // Draw the Image on Canvas  this.drawImage = function(){  	this.CanvasContext.putImageData(this.CanvasImage, this.offsetX, this.offsetY, this.cropOffsetX, this.cropOffsetY, this.drawWidth, this.drawHeight);  } }</script></head><body><div id="main"><canvas id="cvs">Your Browser Is Not Support HTML5!</canvas></div><script type="text/javascript">var imgIndex = 0;var optical = 0;var step = 5;var incFlag = true;var i = 0;var arrRawData = [["WWWWB","WBBBW","WWWWB","WBBBW","WWWWB"],["WBBBB","WBBBB","WBBBB","WBBBB","WWWWW"],["WBBBW","WBBBW","WBBBW","WBBBW","BWWWB"],["WWWWW","WBBBB","WWWWW","WBBBB","WWWWW"],["BWWWB","BBWBB","BBWBB","BBWBB","BWWWB"],["WWWWB","WBBBW","WBBBW","WBBBW","WWWWB"],["WWWWW","WBBBB","WWWWW","WBBBB","WWWWW"],["BBWBB","BWBWB","WWWWW","WBBBW","WBBBW"]];var arrOrgData = arrRawData[0];refreshImage();setInterval(loopCanvas, 10);/* Below is Temporary Usage */function loopCanvas(){	if (incFlag && optical == 0) {		arrOrgData = arrRawData[i];		i = (i==7)?0:(i+1)	}	if (incFlag) {		optical += step	} else {		optical -= step	}	incFlag = (optical>=255)?false:incFlag;	incFlag = (optical<=0)?true:incFlag;	optical = (optical>=255)?255:optical;	optical = (optical<=0)?0:optical;	refreshImage();}function refreshImage(){	var cvs = new instanceCanvas("cvs", 20, 20, arrOrgData, "");  cvs.initCanvas();  cvs.expandImage();  cvs.generateImageData();  for(var i=3;i<cvs.CanvasImage.width*cvs.CanvasImage.height*4;i+=4){  	cvs.CanvasImage.data[i] = optical;  }  cvs.drawImage();}</script></body></html>

上一篇：html5写的3D逼真圣诞树效果，请用火狐浏览

下一篇：HTML5 风车特效，请使用火狐浏览