HTML5 Canvas方块字放大特效

答案：<!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>
上一个：跟随鼠标的方块
下一个：BrowserCheck浏览器检测脚本生成器
更多图片编程知识: