Question

我对Javascript很不公平。我想创建一个100x100的SVG并为每个像素赋予自己的颜色。这可能吗？

==编辑==

人们喜欢投票给没有经验的人......

让我重新说一下，我想创建100x100的图像并为每个像素单独着色。

Answer 1

SVG是矢量图形格式。这意味着它通过定义它使用的形状（线条，曲线等）来渲染图像。想想人们如何逐笔描绘图像。与此相比，您要问的是逐像素定义的光栅图像。我不确定你为什么要这样做，但它似乎不是一个好主意。从提供的有限信息，我会说canvas元素听起来是正确的方式。

Answer 2

像素和基于矢量的图形之间的关键区别在于图像的结构。

基于像素的图形由许多微小的物理方块（或“像素”）组成

使用数学方程式绘制出矢量图形，这些方程式可以计算出形状边缘相对于彼此的位置。

要在SVG中制作100 x 100的网格，您可以执行类似

的操作

<svg width="100" height="100" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="1" y="1" width="1" height="1"/>
    ... // do this about 100^2 more times changing coordinates
</svg>

让您有一个更好的开始Comparing/finding the difference between two text files using findstr

Answer 3

SVG中的所有内容都是相对的，而不是像素测量的。然而，仍然使用X和Y坐标系统进行测量。所以你可以在0,0到1,1.0之间的方框颜色，从0,0到0.5,0.5，但是盒子的大小是25％，并且取决于尺寸和尺寸。容器，它的大小可能超过或不超过1个像素。

如果你正在使用d3，你提示你在标签中，请看一下形状和AREAS，它们允许你在SVG中为方块着色。

如果您需要颜色的像素映射，那么只需将SVG设置为100px x 100px画布，100 x 100单位，您将获得相同的效果，但请记住，如果您将容器大小更改为200px x 200px，每个方框将是2px x 2px，因为您绘制的形状是矢量，而不是jpg风格的图像，因此渲染应该比更简单的缩放标准图像更大。

Answer 4

如果您只想使用javascript创建简单图像，则可以使用非常简单的库文件创建PNG。可在此处找到示例和可下载的库：

https://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/

使用Javascript逐个像素地构建图像

4 个答案: