aleph1.co.uk Git - yaffs-website/blob - node_modules/phantomjs-prebuilt/lib/phantom/examples/colorwheel.js

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