canvas 绘制图片,canvas 素材
前言
童年玩红白机。尤其是国内的小霸王，还记得那个时候。
记得那个马里奥叔叔吗？
因为从小就特别喜欢像素风的游戏，像素风本身就是由极其简单的元素组成的极其复杂的画面，所以可以有无限的创作空间，形成令人难忘的独特画风。所以想借一张清晰的图片生成一张有像素点阵的图片量产。
这是我写的第一篇文章。请原谅我的许多缺点。
介绍
如何将清晰的图片转化为像素风格的图片？
首先要明白，像素风是由简单的单一色块组成的。
所以我们第一步就是上传一张图，画出来。然后，每隔一定的像素获得图片的颜色值和位置。将这些颜色值重新绘制到画布的相应位置，就可以简单地实现一个像素风。
实现
1. 上传原图片
输入类型=文件接受=。jpeg，jpg，png /script document . query selector( input[type=file])。addEventListener(change ，uploadImage，false)；/script首先，我们需要在页面上放置一个上传文件的输入。用这些accept属性来限制上传的类型，因为涉及到一些图片的常规上传，所以有三种格式：jpeg，jpg，png。
同时要监控他的改动，以获取需要转换的文件。
接下来，我将定义一个uploadImage函数。
函数upload image(e){ let file=e . target . files[0]；如果(！文件)返回；let fileReader=new fileReader()；fileReader.readAsDataURL(文件)；file reader . onload=()={ create image(file reader)；e . target . value=“”；document . query selectorall( canvas )。forEach(node={ node . remove()；}) };}函数create Image(obj){ let img=new Image()；img . onload=()={ draw image(img)；};img . src=obj . result；}这里我们可以在fileReader.result中获取上传的图片地址，然后编写一个createImage函数，将文件对象实例化接收到一个图片中，用于绘制画布。毕竟，对于一个函数来说，尝试只做一件事是一个好习惯。
2.绘制原图片
函数draw image(img){ let canvas=document . createelement( canvas )；let CTX=canvas . get context( 2d )；画布.宽度=ctx .宽度；canvas.height=ctx.heigh设w=img.width，h=img.heightctx.drawImage(img，0，0，w，h)；document . body . appendchild(canvas)；}
让我们先在画布上画图。康康，是什么样的？现在我们正在考虑我们将生成多大像素的图片。我们在这里做一个全局变量。
设宽度=32；设高度=32；设size=10我们定义生成一个宽度，高度和像素大小。所以“宽”这个名字很不可思议，就是我们需要生成和宽一样多的点，和高一样多的点的像素。大小表示像素被填充的大小，也就是说，每个大小的像素都有一个颜色值。
接下来，让我们修改drawImage函数。
函数draw image(img){ let canvas=document . createelement( canvas )；let CTX=canvas . get context( 2d )；canvas . width=CTX . width=width * size；canvas . height=CTX . height=height * size；设w=img.width，h=img.height设v=w/h；if (v 1) { w=宽度；h=w/v；} else { h=身高；w=h * v；} ctx.drawImage( img，((width - w)/2) * size，((height - h)/2) * size，w * size，h * size)；document . body . appendchild(canvas)；设pxMap=createPxMap(CTX)；DrawPXCanvas(pxMap)}我们期望生成一组包含像素信息的数组并在画好图后返回，然后我们会生成像素风。
当然，为了对比两张图，我们把原图的宽度和高度与像素图拉平，显示在画布中间。
3.绘制像素画
函数createPxMap(CTX){ let pxMap=[]；for(设I=0；I宽度*尺寸；i=size) { for(设j=0；j高度*尺寸；j=size){ let pixel=CTX . getimagedata(I，j，1，1)。数据；let color=`rgba(${pixel[0]}，${pixel[1]}，${pixel[2]}，$ { pixel[3]/255 })`；pxMap.push({ x: i/size，y: j/size，color })；} }返回pxMap}我先获取点的位置和颜色信息。ctx.getImageData可以得到一个缓冲区数组，0-3位分别代表红色、绿色、蓝色和透明度信息。我们需要存储这些信息。
最后，我们将能够画出像素画。
函数drawPXCanvas(pxMap){ let canvas=document . createelement( canvas )；let CTX=canvas . get context( 2d )；canvas . width=CTX . width=width * size；canvas . height=CTX . height=height * size；pxmap . foreach((px)={ const { color，x，y }=pxctx.fillStyle=colorctx.fillRect(x*size，y*size，size，size)；});document . body . appendchild(canvas)；}我们要重新生成一个画布，把刚刚采集的像素信息一个一个的画在画布上，这样一个简单的像素画就完成了。容易吗？
拓展
其实在获取像素信息的时候，可以不局限于canvas2d像素绘画。
还有以下想法：
我们可以借助css box-shadow生成像素画。用：root或者scss更容易控制大小和位置，用动画生成动画也不错。
美猴王像素狐狸甚至我们可以扩展webgl生成3d像素，或者其他样式。
3d皮卡丘
我们可以将进一步的分析像素化，以逐帧形成视频和动画。
这就是这篇关于画布绘制像素风图片的示例代码。更多相关画布像素风内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。