重新编写javascript动画以防止在浏览器中缩放/模糊

我的脚本编写技能有限，我一直在尝试为电子学习课动画重新编写一个小脚本

在帮助下，几年前（不再可用），将AS3动画移植到JS。当JS在FF、IE或Chrome中测试/运行时，它是模糊的

据我所知，这个脚本在画布上使用1x1像素的矩形绘制动画。这会导致缩放、模糊和失真

我不知道如何为画布绘图重新编写JavaScript，使其使用正确大小的矩形（8x8像素而不是1x1像素）

我认为，一旦从1x1更改为8x8，那么脚本index.html和style.css中的画布大小可能需要更改以匹配（最终大小应为640X640）

感谢您对我的帮助（我已经尝试了我所知道的一切，但没有成功）

链接（index.html、src.js、style.css）：

---

画布只有80x80像素。 CSS将其放大到640x480，这意味着您只需将正在绘制的位图拉伸到画布上。 （这就解释了你的模糊性）

实现缩放的诀窍在于：

var scaleFactor = 10;
for(i = 0; i < 6400; i++)
{
    d = random()*256|0;
    val = array[d];
    viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")";
    //fillrect draws your "pixels", 
    viewbmd.fillRect(i%80*scaleFactor, (((i)/80)|0)*scaleFactor , scaleFactor, scaleFactor); 
}

-html:

<canvas width="640" height="640"></canvas>

---

有关工作示例，请参见画布仅为80x80像素。 CSS将其放大到640x480，这意味着您只需将正在绘制的位图拉伸到画布上。 （这就解释了你的模糊性）

实现缩放的诀窍在于：

var scaleFactor = 10;
for(i = 0; i < 6400; i++)
{
    d = random()*256|0;
    val = array[d];
    viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")";
    //fillrect draws your "pixels", 
    viewbmd.fillRect(i%80*scaleFactor, (((i)/80)|0)*scaleFactor , scaleFactor, scaleFactor); 
}

-html:

<canvas width="640" height="640"></canvas>

---

有关工作示例，请参见

我不确定这是否是您尝试实现的目标，因为图像被大幅放大，但是，您可以尝试关闭图像的抗锯齿功能。这将给你从旧的8位看，如果这是你正在寻找的

context.webkitImageSmoothingEnabled = false;

对于Mozilla：

context.mozImageSmoothingEnabled = false;

有关完整内容，请参见我的相关回答：

---

我不确定这是否是您试图实现的，因为图像被大幅放大，但是，您可以尝试关闭图像的抗锯齿功能。这将给你从旧的8位看，如果这是你正在寻找的

context.webkitImageSmoothingEnabled = false;

对于Mozilla：

context.mozImageSmoothingEnabled = false;

有关完整内容，请参见我的相关回答：

---

---

您好，谢谢您的回复。我感谢你的帮助。我以为画布是80X80，缩放到640X640？我尝试添加新脚本（使用scale=8），但这并没有解决模糊问题。对不起，这方面不是很熟练。也许，问题是你提到的：“我们遇到了麻烦，在我们点击flipSomePixels的那一刻，因为它只是从我们之前绘制的位图中提取实际像素，然后开始翻转这些像素，因此我们需要类似的技巧来绘制更新后的伪像素。”不确定如何修复此问题。还需要帮助。对不起，也许我应该再详细一点。画布确实很小，而且正在放大（看起来很可怕）。解决这一问题的最佳方法是将画布本身变大，而不是缩放画布，只绘制更大的正方形而不是单个像素。我给出的代码示例粗略地解释了如何做到这一点。再次感谢。不幸的是，当我尝试使用缩放的不同组合时，尝试将其应用于flipSomePixels，得到了奇怪的显示，但没有成功。我将此添加到HTML页面，它似乎起到了作用：嗨，谢谢你的回复。我感谢你的帮助。我以为画布是80X80，缩放到640X640？我尝试添加新脚本（使用scale=8），但这并没有解决模糊问题。对不起，这方面不是很熟练。也许，问题是你提到的：“我们遇到了麻烦，在我们点击flipSomePixels的那一刻，因为它只是从我们之前绘制的位图中提取实际像素，然后开始翻转这些像素，因此我们需要类似的技巧来绘制更新后的伪像素。”不确定如何修复此问题。还需要帮助。对不起，也许我应该再详细一点。画布确实很小，而且正在放大（看起来很可怕）。解决这一问题的最佳方法是将画布本身变大，而不是缩放画布，只绘制更大的正方形而不是单个像素。我给出的代码示例粗略地解释了如何做到这一点。再次感谢。不幸的是，当我尝试使用缩放的不同组合时，尝试将其应用于flipSomePixels，得到了奇怪的显示，但没有成功。我将此添加到HTML页面，它似乎起到了作用：感谢您的建议。帮助我学习。我试着在CSS中使用这些。使显示器非常小（80X80）。需要在不模糊的情况下为640X640。不幸的是，作为一名退休的社会工作者，脚本编写技能/理解能力非常有限，试图修复别人3年前建议的脚本没有成功。我正在尝试使用更新的HTML5，canvas作为这些在线学习课程的动画练习，如果可能的话，从Flash中慢慢地转换它们。然后可以部署在更广泛的设备上：允许更多的人观看课程（旨在帮助他们改善健康状况）。所以，我会继续努力。有一天……：）@用户1134527你会没事的！它需要一个a-ha的经验，不时，然后移动到下一个层次，一步一步。最长的路从第一步开始。ActionScript和JavaScript非常相似，因为它们都基于ECMAScript。然而，对于这个最新脚本，一个有用的解决方案，涉及到网页显示、缩放和浏览器，到目前为止我还没有找到。什么都试过了。还没有“哈哈”的时刻。顺便说一句，甚至尝试关闭SmoothingEnabled（我读了你的其他帖子，如建议的），但这并没有解决缩放/模糊问题。不确定下一步要尝试什么？@Ken AbdiasSoftware不幸的是，如果您正在缩放画布本身，则此操作不起作用，仅当您在画布内缩放位图时，此操作才起作用，因此需要更多的工作（请参阅）谢谢您的建议。帮助我学习。