利用HTML5的Canvas元素实现方块字放大特效

发布时间：2018-08-15 05:53:57 所属栏目：交互来源：站长网

导读：利用HTML5的Canvas元素实现方块字放大特效，闲来无事研究一下Canvas，主要是为了熟悉ImageData，围绕方块字的放大特效圆润毛边和曲线什么的没去研究过，因为涉及到算法和画图方面的东西，不是用Canvas自己的画图命令来画图，不然就像 AutoCAD 里手动命

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

　　示例（请用Chrome、FireFox、Opera、IE9等浏览器查看，不支持IE8及以下浏览器）：

<!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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

移动与华为菜鸟携手：	中科创达加速物联网设
COVID-19对企业和物联