document.title = '線形グラデーションの極座標変換';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:none;}';
document.getElementsByTagName('head').item(0).appendChild(style);

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

let search = location.search.slice(1);
console.log(search);
let params = new URLSearchParams(search);
let q = params.get('q');
console.log(q);
if(q){
  let img = document.createElement('img');
  img.src = q;
  demo.appendChild(img);
  let styleImg = document.createElement('style');
  styleImg.innerText = '#demo img{position:absolute;top:0;left:0;height:100vh;cursor:none;}';
  document.getElementsByTagName('head').item(0).appendChild(styleImg);
}

var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var y=0;
var iw = min/20;

var i1 = 0;


var rgbAry = [
  [255,255,255],
  [0,0,0],
  [122,122,255],
  [0,255,255],
  [0,255,0],
  [255,255,0],
  [255,0,0],
  [255,0,255],
  [0,0,255],
  [0,255,255],
  [0,255,0],
  [255,255,0],
  [255,0,0],
  [255,0,255],
];

  var w = min;
  var h = min;
  var w2 = min / 2;
  var h2 = min / 2;
  var r = Math.sqrt(w2 * w2 + h2 * h2);
  var lut = [];
  var pos = 0;
function toPolar(){

  for (var y = 0; y < h; y++){
    for (var x = 0; x < w; x++){
      var sx = Math.atan2(y - h2, x - w2) * w2 / Math.PI + w2;
      var sy = Math.sqrt((x - h2) * (x - w2) + (y - h2) * (y - h2));
      sy = (r - sy) / r;
      sy = h - sy * sy * h - 1;

      if (sx < 0) sx = 0;
      if (w - 1 < sx) sx = w - 1;
      if (sy < 0) sy = 0;
      if (h - 1 < sy) sy = h - 1;

      sx = Math.round(sx);
      sy = Math.round(sy);

      lut[pos++] = (sy * w + sx) * 4 + 0;
      lut[pos++] = (sy * w + sx) * 4 + 1;
      lut[pos++] = (sy * w + sx) * 4 + 2;
      lut[pos++] = (sy * w + sx) * 4 + 3;
    }
  }
}

function iToRGB(i) {
  return 'rgb('+ rgbAry[i].join(',') +')';
}

//h:0-180
function iToHSL(h,s,l) {
  return 'hsl(' + h + ', '+s+'%, '+l+'%)';
}
function iToC(i) {
  var c;
  if(i === 0){
    c = iToHSL(90,100,30);
  } else if(i===1){
    c = iToHSL(90,100,90);
  } else {
    c = iToHSL(90,100,50);
  }
  return c;
}



function draw() {

  var grad = ctx.createLinearGradient(0, 0, w, 0);
  grad.addColorStop(0/8, iToC(3));
  grad.addColorStop(1/8, iToC(0));
  grad.addColorStop(2/8, iToC(3));
  grad.addColorStop(3/8, iToC(1));
  grad.addColorStop(4/8, iToC(3));
  grad.addColorStop(5/8, iToC(0));
  grad.addColorStop(6/8, iToC(3));
  grad.addColorStop(7/8, iToC(1));
  grad.addColorStop(1,   iToC(3));
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,min,min);

  var output = ctx.getImageData(0,0,w,h);
  var imageData = ctx.getImageData(0,0,w,h);
  var src = imageData.data;
  var dst = output.data;
  for (var n = 0; n < h * w * 4; n++){
      dst[n] = src[lut[n]];
  }

  ctx.putImageData(output, 0, 0);
  var newImage = ctx.getImageData(0,0,min,min);
  var img = new Image();
  img.src = canvas.toDataURL();
  img.onload = function () {
    ctx.clearRect(0, 0, min, min)
    rot = 45 * Math.PI / 180;
    drawPanel(img);
  }
}

function drawPanel(img){
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  for(i=0;i*iw<w;i++){
    for(j=0;j*iw<h;j++){
      ctx.drawImage(img, 0, 0, min, min, i*iw, j*iw, min/20,min/20);
    }
  }
}

toPolar();
draw();

setInterval(function(){
  //draw();
}, 60/120);


document.oncontextmenu = function () {return false;}
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
  w = document.body.clientWidth;
  h = document.body.clientHeight;
  cx = w/2;
  cy = h/2;

  w2 = w/2;
  h2 = h/2;
}

window.onresize = resize;
window.addEventListener('click', function(ev) {
  //resize();
  //document.body.requestFullscreen();
  //draw();
}, false );

window.addEventListener('dblclick', function(ev) {
  //draw();
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-polar/