【Canvas】逐像素在canvas中显示一张图片
【说明】
本例主要使用了canvas的getImageData方法，这个方法需要在服务器端执行，不能写好代码就直接用浏览器打开看效果了。
至于怎么把html放到服务器端，方法挺多，各人都有各人的高招。在这里笔者推荐使用XAMPP，具体请参考：https://www.cnblogs.com/heyang78/p/3339235.html
【效果图】
注意由于像素多，页面会有一定时间的等待。
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>UNASSIGNED</title> <style type="text/css"> .center{ margin:0 auto; width:1200px; } .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="center"><img id="windmills" src="63.windmills.png" style="display:none"/></div> <div class="centerlize"> <canvas id="myCanvas" width="1200px" height="600px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> <canvas id="hideCanvas" width="100px" height="100px" style="display:none"/> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ var Width; var Height; //------------------------------- // 初始化 //------------------------------- function init(){ // 获得img var windmills = document.getElementById("windmills"); // 用于从中取图片数据的隐藏canvas var hideCanvas=document.getElementById('hideCanvas'); hideCanvas.width=windmills.width; hideCanvas.height=windmills.height; hideCtx=hideCanvas.getContext('2d'); hideCtx.drawImage(windmills,0,0); // 真正用于绘图的canvas var canvas=document.getElementById('myCanvas'); canvas.width=windmills.width; canvas.height=windmills.height; Width=windmills.width; Height=windmills.height; // canvas的绘图环境 var ctx=canvas.getContext('2d'); // 逐像素显示图片 for(var i=0;i<Width;i++){ for(var j=0;j<Height;j++){ const data = hideCtx.getImageData(i,j,1,1); ctx.putImageData(data,i,j); } } } //--> </script>
【注意】
虽然逐像素显示图片并不实用，但getImageData/putImageData方法却能为canvas艺术开启新的大门。
END
