digamos que tengo algunas coordenadas dadas x e y para un píxel, ¿cómo podría hacerlo rojo (manteniendo todo lo demás en la página simplemente en blanco) en HTML? ¿Es posible en HTML?¿Cómo puedo hacer que un píxel cambie su color en HTML?
<div style="position: absolute; left: {X}px; top: {Y}px; width: 1px; height: 1px; background-color: red;"></div>
Reemplazar {X} y {Y} con coordenadas reales que tiene. Puede que necesite meterse con z-index, dependiendo de la página. El uso de position: fixed le permitirá ubicarlo en relación con el navegador, en lugar del documento.
aunque en muchos sentidos esto es realmente una solución CSS. – xenoterracide
Thakn ¡Mucho, bcherry! – brilliant
¡Ooops!De esta manera, no parece funcionar. ¿Estoy haciendo algo mal? :
– brilliantpodría poner un div de 1 píxel con el posicionamiento absoluto allí.
Hola cobbal !!! Por favor, dame un ejemplo (fragmento de código). ¿Cómo hago ese posicionamiento absoluto? – brilliant
Probablemente no. Podría ser posible en Javascript, pero no puedo imaginar que sea algo bien conocido.
¿Por qué necesita cambiar un píxel?
Hola Josh !!!! Bueno, no tengo ningún propósito en este momento, solo estoy tratando de averiguar si es posible en HTML en absoluto. – brilliant
Un 1px div como se mencionó, pero si planeas hacer algo elegante con él (es decir, dibujar), va a ser lento. –
Ya veo, gracias Josh !!! – brilliant
Lo que probablemente necesite es el canvas element.
De lo contrario, la solución div de 1 píxel que ofrece cobbal es una forma de hacerlo.
Sin embargo, sospecho que espera extrapolar esta idea para poder dibujar generalmente píxeles arbitrarios. En ese caso, los elementos div serán extremadamente lentos.
El elemento canvas forma parte del estándar HTML 5 emergente. No vas a tener mucho soporte con los navegadores IE, pero todo lo demás funciona en estos días.
¡Hola Koobz! "En ese caso, los elementos div serán extremadamente lentos". ¿Quiere decir que este tipo de página tardará mucho tiempo en cargarse en el navegador? – brilliant
En casos simples, será insignificante. De hecho, si todo lo que haces es dibujar un píxel, estará perfectamente bien, así que no dejes que te asuste. Si tuviera que usarlo para dibujar un círculo y luego animarlo, el resultado probablemente será 100 veces más lento que haciendo el equivalente en lienzo. Estoy sacando ese número del aire, pero en todo caso, sospecho que es peor en la práctica. – Koobz
Veo, Koobz, gracias por la explicación. – brilliant
Se puede utilizar una tabla HTML puro (con BorderWidth, cellpadding y CELLSPACING todos 0, y tr y td alturas todo 1) para crear algo como esto:
alt text http://www.freeimagehosting.net/uploads/36dcc03919.jpg
Puede editar a mano el HTML code para este píxel por píxel (ya que es solo una gran tabla).
Nota: esto no es, obviamente, un enfoque práctico (como se puede ver como su navegador se esfuerza por hacer que un archivo HTML 6 MB), pero es técnicamente posible hacer píxel por píxel de gráficos con HTML puro.
Gracias, MusiGenesis !!! Idea perfecta Creo que si el fondo fuera blanco, en lugar de negro, el navegador "lucharía" mucho menos. – brilliant
Afortunadamente, no estoy * esto * aburrido, pero podría escribir todo un motor de gráficos basado en JavaScript que funciona con tablas ridículas de un píxel por celda como esta, dibujando líneas, formas, texto, etc. píxel por píxel estableciendo el bgcolor de cada celda. Sería como en los viejos tiempos del Apple IIe: verás que tus gráficos se dibujan un píxel cada vez. – MusiGenesis
Esto me dejó pasmado, ¡totalmente genial! En realidad, se procesa casi al instante en Firefox 7 e IE 9, pero Chrome 17 simplemente no puede manejarlo por alguna razón ... – Anders
Debo advertirle que a las PE, especialmente a Google, no les gustan las cosas de 1px. – Ben
Gracias por esta advertencia, omfgroflmao. – brilliant