@zsoltc/gradient-generator
Version:
Color gradient generator
47 lines (40 loc) • 1.78 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>rainbow</title>
</head>
<body>
<!--[if lt IE 9]>
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="canvas" width="500" height="500" style="background: black"></canvas>
<script src="../dist/gradient-generator.js"></script>
<script>
(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(['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff']),
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);
})();
</script>
</body>
</html>