0

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

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

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

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

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

对重写的任何帮助表示赞赏（我已经尝试了我所知道的一切，但没有成功）。

链接（index.html、src.js、style.css）：
https ://elearningprojects.com/websample1/index.html

4

2 回答 2

3

画布只有 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); 
}

为了模拟绘制 bix 像素，您将绘制的矩形的 x/y 位置乘以确定其大小的相同数字（请参阅 scaleFactor）。

在示例中，我正在绘制实际上是 10x10“点”的“像素”。

这样，初始图片就被正确绘制了。

但是我们遇到了麻烦，第二次我们点击flipSomePixels，因为它只是从我们之前绘制的位图中获取实际像素，然后开始翻转它们，所以我们需要一个类似的技巧来在那里绘制更新的假像素。

：：更新：：

感谢肯，我知道如何以“更简单”的方式实现这一目标。我们可以在屏幕外绘制原始的 80x80 画布，并将其拉伸到更大的画布上。

尽管如此，我们仍然需要取消 css 画布调整大小，因为调整画布元素的大小仍然会导致模糊缩放发生。相反，我们将画布设为 640x640，并告诉它像这样进行清晰的图像渲染：

-css：

canvas{
    border:1px solid black;
    image-rendering: optimizeSpeed;             
    image-rendering: -moz-crisp-edges;          
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: -o-crisp-edges;            
    image-rendering: optimize-contrast;         
    -ms-interpolation-mode: nearest-neighbor;   
}

-html：

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

有关工作示例，请参阅http://jsfiddle.net/QTvpe/10/

于 2013-07-16T16:22:40.027 回答
1

我不确定这是否是您尝试实现的，因为图像被大大放大，但是您可以尝试关闭图像的抗锯齿功能。如果您正在寻找的话，这将为您提供过去的 8 位外观。

context.webkitImageSmoothingEnabled = false;

对于 Mozilla：

context.mozImageSmoothingEnabled = false;

另请参阅我的相关答案以获得完整的上下文：
网络浏览器中的图像略微模糊。如何禁用它？

于 2013-07-16T19:26:22.673 回答