解决 HTML Canvas 图像渲染 DOWNGRADE 问题答案

【问题标题】：Solve HTML Canvas image-rendering DOWNGRADE issue解决 HTML Canvas 图像渲染 DOWNGRADE 问题
【发布时间】：2020-11-21 05:46:34
【问题描述】：

这些天来，在尝试使用画布在 HTML 页面中渲染一些图形时，我遇到了以下问题：画布元素在渲染时降级了我的图像，一段时间后。

这是可视化的问题：

要渲染的图像 (32x32)

第一次渲染（浏览器缩放）

在一些移动（通过键盘事件）之后图像如何随机获取

注意 1：我没有调整图像大小！

注意 2：负责绘制的函数每 10 毫秒调用一次

注意 3：我在 CSS 中使用 image-rendering: pixelated 作为画布

注4：这是负责绘制它的函数：

    function draw_player(x,y,w,h,state){
    
        if(state>2){ctx.drawImage(player_sprite_jump, x,y, w,h)}
        if(state<=1){ctx.drawImage(player_sprite_left, x,y, w,h)}
        if(state===2){ctx.drawImage(player_sprite_right, x,y, w,h)}
}

（w 和 h 又是 32，我不会在任何地方调整图像大小！）

注意 5：我使用的是 HTML、CSS 和只有 vanilla JS

如果需要任何其他信息，我愿意贡献。

请帮忙！

【问题讨论】：

你必须创建一个完整的sn-p
您必须在像素边界处渲染。如果您不使用transform、scale、rotate、translate 或setTransform，您可以使用ctx.drawImage(img, Math.round(x), Math.round(y), w, h); 对齐像素边界（制作 x 和 y 整数值）您还可以使用最近的像素进行渲染通过设置ctx.imageSmoothingEnabled = false，仍然需要对齐像素以避免伪影。
是的，我刚刚找到原因了！

标签： javascript html css dom canvas

【解决方案1】：

基本上，这是由imageSmoothingEnabled 发生的，默认设置为“true”

它会尝试平滑图像，并去除像素的锐度！

解析：ctx.imageSmoothingEnabled = false;

【讨论】：