Puro JavaScript Smooth gradiente generador
| Autor: | zsoltc |
|---|---|
| Views Total: | 3,768 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 30, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca JavaScript pura que le permite dibujar degradados suaves en HTML5 Canvas Element.
Funcionamiento
Cargue el gradient-generator. dev. js en el documento.
<script src="path/to/gradient-generator.dev.js"></script>
Cree un elemento Canvas de HTML5 donde desee dibujar degradados.
<canvas id="canvas" width="500" height="500" style="background: black"></canvas>
El código JavaScript para generar degradados con colores personalizados.
(function () {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageData = ctx.getImageData(0, 0, canvas.getAttribute('width'), canvas.getAttribute('height')),
pixels = imageData.data,
gradient = GradientGenerator.createGradient('#000000 #c50106 #f5f100 #ffffff'),
val,
color,
base,
x,
y;
for (y = 0; y < imageData.height; ++y) {
for (x = 0; x < imageData.width; ++x) {
val = (x + y) / (imageData.width + imageData.height);
color = gradient.getColorBytesAt(val);
base = (y * imageData.width + x) * 4;
pixels[base] = color.r;
pixels[base + 1] = color.g;
pixels[base + 2] = color.b;
pixels[base + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
})(); Registro de cambios
09/30/2016
- Reescrito en ES6
