如何在HTML中让一个像素改变颜色？

Question

如何在HTML中让一个像素改变颜色？

htmlcolorspixel

7

假设我有一些给定的像素坐标x和y，如何在HTML中使它变成红色（同时保持页面上其他元素为白色）？这在HTML中是否可行？

- brilliant

我应该警告你，搜索引擎，特别是谷歌，不喜欢1像素的东西。 - Ben

谢谢你的警告，omfgroflmao。 - brilliant

5个回答

7

你可能需要的是canvas元素。

否则，cobbal提供的1像素div解决方案是一种方法。

我怀疑你希望将这个想法推广到能够绘制任意像素。在这种情况下，div元素将非常缓慢。

canvas元素是新兴HTML 5标准的一部分。IE浏览器的支持不会很好，但现在其他所有浏览器都可以使用。

- Koobz

1

你好Koobz！！！“在这种情况下，div元素将非常缓慢” - 你的意思是这种页面加载到浏览器中需要很长时间吗？ - brilliant

1

在简单的情况下，这个问题可以忽略不计。事实上，如果你只是画一个像素的话，完全没问题，所以不要被我吓到了。如果你想用它来画一个圆并进行动画处理，结果很可能会比使用 canvas 慢 100 倍。我是随意给出了一个数字，但实际上我认为情况可能更糟。 - Koobz

3

您可以在那里放置一个绝对定位的1像素div。

- cobbal

你好，cobbal！请给我一个例子（代码片段）。我如何使用绝对定位？ - brilliant

2

您可以使用纯HTML表格（边框宽度，单元格内边距和间距都为0，以及tr和td高度均为1）来创建类似于此的内容：

您可以手动编辑HTML代码来进行逐像素的操作（因为它只是一个大表格）。

注意：这显然不是一个实际可行的方法（当您的浏览器努力渲染一个6 MB的HTML文件时，您会发现这一点），但在技术上使用纯HTML进行逐像素图形处理是可能的。

- MusiGenesis

谢谢，MusiGenesis！这个主意太完美了。我认为如果背景是白色而不是黑色，浏览器会“挣扎”得少得多。 - brilliant

1

幸运的是我不会这么无聊，但你可以编写一个基于JavaScript的图形引擎，它可以使用像这样荒谬的每个单元格一个像素的表格来绘制线条、形状、文本等，通过设置每个单元格的背景色逐像素地进行绘制。就像在Apple IIe上的旧日子一样-您可以一次一个像素地观看您的图形被绘制出来。 - MusiGenesis

这真是让我大开眼界，太酷了！在Firefox 7和IE 9中它几乎瞬间渲染出来，但Chrome 17却因为某种原因无法处理它... - Anders

@Anders：是的，Chrome上非常慢。我猜测Chrome会在表格中的每个单元格上执行某种内容安全检查，这在普通表格中是察觉不到的，但在像这样的情况下则非常缓慢。 - MusiGenesis

0

可能不行。使用 JavaScript 可能是可能的，但我想这不是一个众所周知的事情。

你为什么需要改变一个像素？

- Josh K

你好，Josh！！！目前我没有任何特定的目的，只是想弄清楚在HTML中是否有可能实现。 - brilliant

一个1像素的div，但如果你打算用它来做任何花哨的事情（比如绘图），它会很慢。 - Josh K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bcherry · Accepted Answer

<div style="position: absolute; left: {X}px; top: {Y}px; width: 1px; height: 1px; background-color: red;"></div>

用你实际拥有的真实坐标替换{X}和{Y}。根据页面的情况，可能需要调整z-index。使用position: fixed将允许您相对于浏览器而不是文档来定位它。