colorwheel.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. var page = require('webpage').create();
  2. page.viewportSize = { width: 400, height : 400 };
  3. page.content = '<html><body><canvas id="surface"></canvas></body></html>';
  4. page.evaluate(function() {
  5. var el = document.getElementById('surface'),
  6. context = el.getContext('2d'),
  7. width = window.innerWidth,
  8. height = window.innerHeight,
  9. cx = width / 2,
  10. cy = height / 2,
  11. radius = width / 2.3,
  12. imageData,
  13. pixels,
  14. hue, sat, value,
  15. i = 0, x, y, rx, ry, d,
  16. f, g, p, u, v, w, rgb;
  17. el.width = width;
  18. el.height = height;
  19. imageData = context.createImageData(width, height);
  20. pixels = imageData.data;
  21. for (y = 0; y < height; y = y + 1) {
  22. for (x = 0; x < width; x = x + 1, i = i + 4) {
  23. rx = x - cx;
  24. ry = y - cy;
  25. d = rx * rx + ry * ry;
  26. if (d < radius * radius) {
  27. hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
  28. sat = Math.sqrt(d) / radius;
  29. g = Math.floor(hue);
  30. f = hue - g;
  31. u = 255 * (1 - sat);
  32. v = 255 * (1 - sat * f);
  33. w = 255 * (1 - sat * (1 - f));
  34. pixels[i] = [255, v, u, u, w, 255, 255][g];
  35. pixels[i + 1] = [w, 255, 255, v, u, u, w][g];
  36. pixels[i + 2] = [u, u, w, 255, 255, v, u][g];
  37. pixels[i + 3] = 255;
  38. }
  39. }
  40. }
  41. context.putImageData(imageData, 0, 0);
  42. document.body.style.backgroundColor = 'white';
  43. document.body.style.margin = '0px';
  44. });
  45. page.render('colorwheel.png');
  46. phantom.exit();