Javascript 如何通过CSS修改导出Canva Render具有GIF

我正在使用p5.js制作一个GIF动画，但是当我想要导出它时遇到了一个问题。
通过将这些css属性添加到Canva（140*140），我在动画中实现了基于像素的效果：

我的问题是，我不能用我添加的属性导出这个Canva。（我正在使用CCapture）
我的gif是140x140，没有像素效果

---

如何获得所需的渲染？

可以为HTML元素（例如

设置的宽度和高度与CSS宽度和高度属性之间存在差异

前者定义画布的实际大小，在本例中为140x140

如果我们现在将CSS宽度和高度设置为与HTML元素的宽度和高度不同的值，例如

，画布的实际大小（以像素为单位）不会改变，而是保持在140 x 140像素。CSS属性只控制浏览器中显示的元素的大小，这意味着140 x 140被简单地拉伸到500 x 500

因此，如果您获得画布的实际像素数据（用于导出为gif/png），最终图像将具有画布的原始尺寸，而不是渲染图像

不过，解决方法很简单。不要直接使用源画布进行导出，而是在第二个画布上绘制其内容，即所需分辨率的大小

要强制“导出”画布不使用任何过滤/平滑，需要将其上下文的

imageSmoothingEnabled

属性设置为false

下面是一个示例（您可以右键单击并保存两个图像以查看差异）：

var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，0,0）；
让sourceCanvas=document.getElementById（“canvas”）；
让virtualWidth=parseInt（getComputedStyle（sourceCanvas）.width）；
让virtualHeight=parseInt（getComputedStyle（sourceCanvas）.height）；
var canvas=document.getElementById（“exportCanvas”）；
canvas.width=虚拟宽度；
canvas.height=虚拟高度；
canvas.getContext（'2d'）.imageSmoothingEnabled=false；
getContext（'2d'）.drawImage（sourceCanvas，0，0，virtualWidth，virtualHeight）；
}
image.src=https://mdn.mozillademos.org/files/12640/cat.png';
画布{
宽度：500px；
高度：500px；
}
渲染画布



导出画布


image-rendering: pixelated;
width:500px;
height:500px;