Javascript 在html5画布中对图像进行pixalate

我已经创建了一个使用canvas的游戏，我需要它的分辨率非常低，以适合我正在使用的软件。实际上，当我画一条对角线时，它应该显示为一排对角的正方形

是的

context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;      

但它只是模糊的。我如何转换它

---

顶部图片是它现在的样子，底部是我希望它看起来的样子

一种方法是使用低分辨率画布禁用图像平滑。虽然会得到一条块状线条，但也会包含抗锯齿像素。避免这种情况的唯一方法是自己实现行算法等，比如Bresenham（参见下面的示例）

您也可以绘制线条，然后逐像素运行位图，并使用阈值过滤掉消除混叠的像素，但这将产生各种结果，并且取决于要使用的独立路径，即绘制到屏幕外，使用阈值过滤，然后将结果绘制到主画布

一个例子：

var mctx=main.getContext（“2d”），
lowRes=document.createElement（“画布”），
ctx=lowRes.getContext（“2d”）；
//设置低分辨率画布（不可见）
低分辨率宽度=32；
低分辨率高度=20；
//设置主可视画布
mctx.imageSmoothingEnabled=
mctx.msImageSmoothInEnabled=
mctx.mozImageSmoothingEnabled=
mctx.webkitmagesmoothingEnabled=假；
//画一条线到屏幕外的画布
ctx.moveTo（0，低分辨率高度）；
ctx.lineTo（低分辨率宽度-7,4）；
ctx.线宽=4；
ctx.strokeStyle=“#fff”；
ctx.stroke（）；
//在主画布上绘制背景
mctx.fillRect（0,050300）；
//低分辨率绘制线
mctx.drawImage（低分辨率，0,0，低分辨率宽度，低分辨率高度，
0,0，主要宽度，主要高度）
我看到了，他们在谈论pixalating图像-这不是一个图像，尽管我很乐意了解如何将其转换为图像，然后进行pixalatingit@Dotan我支持使用Ken的Retro上下文库。它很结实，很酷！