我的脚本技能有限,并且一直在尝试为电子学习类(class)动画重写一个小脚本。
在帮助下,几年前(不再可用),将 AS3 动画移植到 JS。当JS在FF、IE或Chrome中测试/运行时,它是模糊的。
据我所知,该脚本正在使用 1x1 px 矩形在 Canvas 上绘制动画。这会导致缩放、模糊和扭曲。
我不确定如何重写 Canvas 绘图的 JavaScript,以便它使用正确大小的矩形(8x8 像素而不是 1x1 像素)?
我认为一旦从 1x1 更改为 8x8,那么脚本中的 Canvas 尺寸、index.html 和 style.css 可能需要更改以匹配(最终尺寸应为 640X640)?
感谢重写方面的任何帮助(我已经尝试了我所知道的一切,但没有成功)。
链接(index.html、src.js、style.css):
https://elearningprojects.com/websample1/index.html
最佳答案
Canvas 只有 80x80 像素。 您的 CSS 将其缩放至 640x480,这意味着您只需将正在绘制的位图拉伸(stretch)到 Canvas 即可。 (这解释了你的模糊)
实现缩放的技巧在这里:
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
时,我们遇到了麻烦,因为它只是从我们之前绘制的位图中获取实际像素,然后开始翻转这些像素,所以我们需要类似的技巧来绘制在那里更新了假像素。
::更新::
感谢 Ken,我知道了如何以“更简单”的方式实现这一目标。 我们可以在屏幕外绘制原始的 80x80 Canvas ,并将其拉伸(stretch)到更大的 Canvas 上。
我们仍然需要取消 css canvas 调整大小,因为调整 canvas 元素的大小仍然会导致模糊缩放的发生。 相反,我们将 Canvas 设置为 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/
关于javascript - 重写 JavaScript 动画以防止浏览器中缩放/模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17680897/