mirror of https://github.com/vitalif/phantomjs
colorwheel.js: Example on using Canvas to produce the color wheel.
parent
de8a2ca270
commit
e15834522d
|
@ -18,6 +18,8 @@ Version 1.1.0
|
|||
|
||||
Fixed issue #14: enable or disable plugins (Ariya Hidayat).
|
||||
|
||||
Added a new example: using Canvas to produce the color wheel (Ariya Hidayat).
|
||||
|
||||
2011-01-17: Version 1.0.0
|
||||
|
||||
Initial launch.
|
||||
|
|
|
@ -0,0 +1,52 @@
|
|||
if (phantom.state.length === 0) {
|
||||
phantom.state = 1;
|
||||
phantom.viewportSize = { width: 400, height : 400 };
|
||||
phantom.content = '<html><body><canvas id="surface">' +
|
||||
'</canvas></body></html>';
|
||||
} else {
|
||||
var el = document.getElementById('surface'),
|
||||
context = el.getContext('2d'),
|
||||
width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
cx = width / 2,
|
||||
cy = height / 2,
|
||||
radius = width / 2.3,
|
||||
imageData,
|
||||
pixels,
|
||||
hue, sat, value,
|
||||
i = 0, x, y, rx, ry, d,
|
||||
f, g, p, u, v, w, rgb;
|
||||
|
||||
el.width = width;
|
||||
el.height = height;
|
||||
imageData = context.createImageData(width, height);
|
||||
pixels = imageData.data;
|
||||
|
||||
for (y = 0; y < height; y = y + 1) {
|
||||
for (x = 0; x < width; x = x + 1, i = i + 4) {
|
||||
rx = x - cx;
|
||||
ry = y - cy;
|
||||
d = rx * rx + ry * ry;
|
||||
if (d < radius * radius) {
|
||||
hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
|
||||
sat = Math.sqrt(d) / radius;
|
||||
g = Math.floor(hue);
|
||||
f = hue - g;
|
||||
u = 255 * (1 - sat);
|
||||
v = 255 * (1 - sat * f);
|
||||
w = 255 * (1 - sat * (1 - f));
|
||||
pixels[i] = [255, v, u, u, w, 255, 255][g];
|
||||
pixels[i + 1] = [w, 255, 255, v, u, u, w][g];
|
||||
pixels[i + 2] = [u, u, w, 255, 255, v, u][g];
|
||||
pixels[i + 3] = 255;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
document.body.style.backgroundColor = 'white';
|
||||
document.body.style.margin = '0px';
|
||||
|
||||
phantom.render('colorwheel.png');
|
||||
phantom.exit();
|
||||
}
|
Loading…
Reference in New Issue