英文:
canvas drawImage pixelated (pixel art)
问题
我正在使用HTML、CSS和JavaScript（没有外部库）编写一个挖矿游戏。我正在使用drawImage()画布函数将单独的矿石显示在画布上。我试图将image-rendering样式应用于像素化的图像。然而，图像仍然显得模糊。每种矿石类型只加载一个图像。以下是矿石声明的代码：
class Ore {
constructor(name, /*...*/) {
// ...
this.texture = new Image(32, 32)
this.texture.src = `assets/ores/${name}.png`
this.texture.onload = () => {loadProg += 1; this.texture.style.imageRendering = "pixelated";}
// ...
}
}
以下是在每帧运行的渲染矿石的代码（ctx是我的画布上下文）：
function render() {
ctx.clearRect(0, 0, 2000, 920)
// 下面一行选择所有可见的矿石
oreDisplays.filter((i) => (i.yOffset == yOffset)).forEach((i) => {
ctx.drawImage(i.texture, i.pos[0], i.pos[1], 40, 40)
})
// ...
}
我尝试过在onload中运行和不运行它，以及使用带有短横线和不带短横线的image-rendering样式。我还尝试过在img标签中使用普通的CSS。我预期图像在放大时不会变模糊。然而，它们仍然模糊。
我不在乎解决方案有多混乱，只要它能正常工作，不会严重影响性能，并且除了在必要时使用jQuery之外，不使用任何外部库。
英文:
I am programming a mining game using HTML, CSS, and JavaScript (no external libraries). I am using the drawImage() canvas function to draw individual ore displays onto the canvas. I am attempting to apply the image-rendering style to the image as pixelated. However, the images still appear blurry. Only one image is loaded per ore type. Here is the code where ores are declared:
class Ore {
constructor(name, /*...*/) {
// ...
this.texture = new Image(32, 32)
this.texture.src = `assets/ores/${name}.png`
this.texture.onload = () => {loadProg += 1; this.texture.style.imageRendering = "pixelated"}
// ...
}
}
Here is the code where the ore is rendered which is ran every frame (ctx is my canvas context):
function render() {
ctx.clearRect(0, 0, 2000, 920)
// line below selects all ores visible
oreDisplays.filter((i) => (i.yOffset == yOffset)).forEach((i) => {
ctx.drawImage(i.texture, i.pos[0], i.pos[1], 40, 40)
})
// ...
}
I have tried doing it both with and without it running with onload and typing the image-rendering style with and without a dash. I have also tried using normal CSS with img. I expected for the images to not be blurry when zoomed in. However, they still are blurry.
Image of ores still rendering blurry
I do not care how messy the solution is as long as it works, does not heavily affect the performance, and does not use any external libraries other than jQuery (only if neccesary).
答案1
得分: 0
在CSS中使用：image-rendering: pixelated; 在canvas 元素上（不在img上）：
canvas {
image-rendering: pixelated;
}
https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
如果整个游戏都是像素艺术...无论如何混合风格都没有意义 
英文:
Use in CSS: image-rendering: pixelated; on the canvas element (not on the img):
canvas {
image-rendering: pixelated;
}
https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
If your entire game is pixel art... makes no sense to mix up styles anyway
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论