html5画布圈调色板

Question

我有圆圈调色板的来源，问题是调色板有250px x 250px的静态大小，我需要更小的200px x 200px。乍一看代码看起来凌乱，但不需要像分析功能转换：HSB2RGB, RGB2HSB等

function HSB2RGB(j, d, c) { 
 
     var e, g, l, h, k, b, a, m; 
 
     if (c == 0) { 
 
      return [0, 0, 0] 
 
     } 
 
     j *= 0.016666667; 
 
     d *= 0.01; 
 
     c *= 0.01; 
 
     h = Math.floor(j); 
 
     k = j - h; 
 
     b = c * (1 - d); 
 
     a = c * (1 - (d * k)); 
 
     m = c * (1 - (d * (1 - k))); 
 
     switch (h) { 
 
      case 0: 
 
       e = c; 
 
       g = m; 
 
       l = b; 
 
       break; 
 
      case 1: 
 
       e = a; 
 
       g = c; 
 
       l = b; 
 
       break; 
 
      case 2: 
 
       e = b; 
 
       g = c; 
 
       l = m; 
 
       break; 
 
      case 3: 
 
       e = b; 
 
       g = a; 
 
       l = c; 
 
       break; 
 
      case 4: 
 
       e = m; 
 
       g = b; 
 
       l = c; 
 
       break; 
 
      case 5: 
 
       e = c; 
 
       g = b; 
 
       l = a; 
 
       break 
 
     } 
 
     return [e, g, l] 
 
    } 
 

 
    function RGB2HSB(c, d, k) { 
 
     var j, h, e, g, b, a; 
 
     j = Math.min(Math.min(c, d), k); 
 
     a = Math.max(Math.max(c, d), k); 
 
     if (j == a) { 
 
      return [0, 0, a * 100] 
 
     } 
 
     h = (c == j) ? d - k : ((d == j) ? k - c : c - d); 
 
     e = (c == j) ? 3 : ((d == j) ? 5 : 1); 
 
     g = Math.floor((e - h/(a - j)) * 60) % 360; 
 
     b = Math.floor(((a - j)/a) * 100); 
 
     a = Math.floor(a * 100); 
 
     return [g, b, a] 
 
    } 
 

 
    function ColorSelector(a) { 
 
     this.init(a) 
 
    } 
 

 
    ColorSelector.prototype = { 
 
     container: null, 
 
     color: [0, 0, 0], 
 
     hueSelector: null, 
 
     luminosity: null, 
 
     luminosityData: null, 
 
     luminositySelector: null, 
 
     luminosityPosition: null, 
 
     dispatcher: null, 
 
     changeEvent: null, 
 

 
     init: function(k) { 
 
      var m = this, 
 
       b1, g2, d3; 
 

 
      this.container = document.getElementById('mainDiv') 
 
      this.container.addEventListener("mousedown", l, false); 
 
      this.container.addEventListener("touchstart", f, false); 
 

 

 
      g2 = document.getElementById('g2'); 
 
      g2.width = k.width; 
 
      g2.height = k.height; 
 

 
      b1 = g2.getContext("2d"); 
 
      b1.drawImage(k, 0, 0, g2.width, g2.height); 
 
      d3 = b1.getImageData(0, 0, g2.width, g2.height).data; 
 
      
 

 
      this.luminosity = document.getElementById('luminosity'); 
 
      this.hueSelector = document.getElementById('hue-selector'); 
 
      this.hueSelector.style.left = ((g2.width - 15)/2) + "px"; 
 
      this.hueSelector.style.top = ((g2.height - 15)/2) + "px"; 
 

 

 
      b1 = this.hueSelector.getContext("2d"); 
 
      b1.lineWidth = 2; 
 
      b1.strokeStyle = "rgba(0, 0, 0, 0.5)"; 
 
      b1.beginPath(); 
 
      b1.arc(8, 8, 6, 0, Math.PI * 2, true); 
 
      b1.stroke(); 
 
      b1.strokeStyle = "rgba(256, 256, 256, 0.8)"; 
 
      b1.beginPath(); 
 
      b1.arc(7, 7, 6, 0, Math.PI * 2, true); 
 
      b1.stroke(); 
 
      
 
      this.luminosityPosition = [(k.width - 15), (k.height - 15)/2]; 
 

 

 
      this.luminositySelector = document.getElementById('luminosity-selector'); 
 
      this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px"; 
 
      this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px"; 
 
      b1 = this.luminositySelector.getContext("2d"); 
 
      b1.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height); 
 

 
      this.dispatcher = document.createElement("div"); 
 
      this.changeEvent = document.createEvent("Events"); 
 
      this.changeEvent.initEvent("change", true, true); 
 

 
      function l(n) { 
 
       window.addEventListener("mousemove", c, false); 
 
       window.addEventListener("mouseup", h, false); 
 
       e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
 
      } 
 

 
      function c(n) { 
 
       e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
 
      } 
 

 
      function h(n) { 
 
       window.removeEventListener("mousemove", c, false); 
 
       window.removeEventListener("mouseup", h, false); 
 
       e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
 
      } 
 

 
      function f(n) { 
 
       if (n.touches.length == 1) { 
 
        n.preventDefault(); 
 
        window.addEventListener("touchmove", a, false); 
 
        window.addEventListener("touchend", j, false); 
 
        e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop) 
 
       } 
 
      } 
 

 
      function a(n) { 
 
       if (n.touches.length == 1) { 
 
        n.preventDefault(); 
 
        e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop) 
 
       } 
 
      } 
 

 
      function j(n) { 
 
       if (n.touches.length == 0) { 
 
        n.preventDefault(); 
 
        window.removeEventListener("touchmove", a, false); 
 
        window.removeEventListener("touchend", j, false) 
 
       } 
 
      } 
 

 
      function e(o, t) { 
 
       var q, p, r, n, s; 
 
       q = o - 125; 
 
       p = t - 125; 
 
       r = Math.sqrt(q * q + p * p); 
 
       if (r < 90) { 
 
        m.hueSelector.style.left = (o - 7) + "px"; 
 
        m.hueSelector.style.top = (t - 7) + "px"; 
 
        m.updateLuminosity([d3[(o + (t * 250)) * 4], d3[(o + (t * 250)) * 4 + 1], d3[(o + (t * 250)) * 4 + 2]]) 
 
       } else { 
 
        if (r > 100) { 
 
         n = q/r; 
 
         s = p/r; 
 
         m.luminosityPosition[0] = (n * 110) + 125; 
 
         m.luminosityPosition[1] = (s * 110) + 125; 
 
         m.luminositySelector.style.left = (m.luminosityPosition[0] - 7) + "px"; 
 
         m.luminositySelector.style.top = (m.luminosityPosition[1] - 7) + "px" 
 
        } 
 
       } 
 
       o = Math.floor(m.luminosityPosition[0]); 
 
       t = Math.floor(m.luminosityPosition[1]); 
 
       m.color[0] = m.luminosityData[(o + (t * 250)) * 4]; 
 
       m.color[1] = m.luminosityData[(o + (t * 250)) * 4 + 1]; 
 
       m.color[2] = m.luminosityData[(o + (t * 250)) * 4 + 2]; 
 
       m.dispatchEvent(m.changeEvent) 
 
      } 
 
     }, 
 
     getColor: function() { 
 
      return this.color 
 
     }, 
 
     setColor: function(c) { 
 
      var a, e, f, d, b = Math.PI/180; 
 
      this.color = c; 
 
      a = RGB2HSB(c[0]/255, c[1]/255, c[2]/255); 
 
      e = a[0] * b; 
 
      f = (a[1]/100) * 90; 
 
      this.hueSelector.style.left = ((Math.cos(e) * f + 125) - 7) + "px"; 
 
      this.hueSelector.style.top = ((Math.sin(e) * f + 125) - 7) + "px"; 
 
      d = HSB2RGB(a[0], a[1], 100); 
 
      d[0] *= 255; 
 
      d[1] *= 255; 
 
      d[2] *= 255; 
 
      this.updateLuminosity(d); 
 
      e = (a[2]/100) * 360 * b; 
 
      this.luminosityPosition[0] = (Math.cos(e) * 110) + 125; 
 
      this.luminosityPosition[1] = (Math.sin(e) * 110) + 125; 
 
      this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px"; 
 
      this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px"; 
 
      this.dispatchEvent(this.changeEvent) 
 
     }, 
 
     updateLuminosity: function(j) { 
 
      var d, f, l, g, p, b, a, o = 100, 
 
       h = 120, 
 
       k, n = 1080/2, 
 
       e = 1/n, 
 
       c = Math.PI/180, 
 
       m = (n/360); 
 
      b = this.luminosity.width/2; 
 
      a = this.luminosity.height/2; 
 
      d = this.luminosity.getContext("2d"); 
 
      d.lineWidth = 3; 
 
      d.clearRect(0, 0, this.luminosity.width, this.luminosity.height); 
 
      for (k = 0; k < n; k++) { 
 
       f = k/m * c; 
 
       l = Math.cos(f); 
 
       g = Math.sin(f); 
 
       p = 255 - (k * e) * 255; 
 
       d.strokeStyle = "rgb(" + Math.floor(j[0] - p) + "," + Math.floor(j[1] - p) + "," + Math.floor(j[2] - p) + ")"; 
 
       d.beginPath(); 
 
       d.moveTo(l * o + b, g * o + a); 
 
       d.lineTo(l * h + b, g * h + a); 
 
       d.stroke() 
 
      } 
 
      this.luminosityData = d.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data 
 
     }, 
 
     addEventListener: function(b, c, a) { 
 
      this.dispatcher.addEventListener(b, c, a) 
 
     }, 
 
     dispatchEvent: function(a) { 
 
      this.dispatcher.dispatchEvent(a) 
 
     }, 
 
     removeEventListener: function(b, c, a) { 
 
      this.dispatcher.removeEventListener(b, c, a) 
 
     } 
 
    }; 
 

 
    function Palette() { 
 
     var canvas, canvasCtx, canvasHalfWidth, canvasHalfHeight, n = 90, 
 
      m = 1080, 
 
      f = 1/m, 
 
      l = m/360, 
 
      c = Math.PI/180, 
 
      j, h, k, g, canvasGradient; 
 
     canvas = document.createElement("canvas"); 
 
     canvas.width = 250; 
 
     canvas.height = 250; 
 
     canvasHalfWidth = canvas.width/2; 
 
     canvasHalfHeight = canvas.height/2; 
 
     canvasCtx = canvas.getContext("2d"); 
 
     canvasCtx.lineWidth = 1; 
 
     for (j = 0; j < m; j++) { 
 
      h = j/l * c; 
 
      k = Math.cos(h); 
 
      g = Math.sin(h); 
 
      canvasCtx.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)"; 
 
      canvasCtx.beginPath(); 
 
      canvasCtx.moveTo(k + canvasHalfWidth, g + canvasHalfHeight); 
 
      canvasCtx.lineTo(k * n + canvasHalfWidth, g * n + canvasHalfHeight); 
 
      canvasCtx.stroke() 
 
     } 
 
     canvasGradient = canvasCtx.createRadialGradient(canvasHalfWidth, canvasHalfWidth, 0, canvasHalfWidth, canvasHalfWidth, n); 
 
     canvasGradient.addColorStop(0, "rgba(255, 255, 255, 1)"); 
 
     canvasGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); 
 
     canvasCtx.fillStyle = canvasGradient; 
 
     canvasCtx.fillRect(0, 0, canvas.width, canvas.height); 
 
     return canvas 
 
    } 
 
    /* ADDED END */ 
 

 
    var SCREEN_WIDTH = window.innerWidth, 
 
     SCREEN_HEIGHT = window.innerHeight, 
 
     COLOR = [0, 0, 0], 
 
     i, 
 
     container, foregroundColorSelector, canvas, flattenCanvas, context; 
 
    init(); 
 

 
    function init() { 
 
     var hash, palette; 
 
     container = document.createElement("div"); 
 

 
     document.body.appendChild(container); 
 
     canvas = document.createElement("canvas"); 
 
     canvas.width = 250;//SCREEN_WIDTH; 
 
     canvas.height = 250;//SCREEN_HEIGHT; 
 
     canvas.style.cursor = "crosshair"; 
 
     container.appendChild(canvas); 
 
     context = canvas.getContext("2d"); 
 
     palette = new Palette(); 
 
     foregroundColorSelector = new ColorSelector(palette); 
 
     foregroundColorSelector.addEventListener("change", onForegroundColorSelectorChange, false); 
 
     container.appendChild(foregroundColorSelector.container); 
 

 
     foregroundColorSelector.setColor(COLOR); 
 
     fillBox(COLOR); 
 
    } 
 

 
    function onForegroundColorSelectorChange(a) { 
 
     fillBox(foregroundColorSelector.getColor()); 
 
    } 
 

 
    function fillBox(color) { 
 
     $('#selected-color').css('background-color', 'rgb('+color[0]+','+color[1]+','+color[2]+')'); 
 
    }

#mainDiv { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 125px; 
 
    height: 125px; 
 
    cursor: pointer; 
 
    z-index: 3; 
 
} 
 

 
#luminosity { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px;  
 
} 
 

 
#hue-selector { 
 
    position: absolute; 
 
} 
 

 
#luminosity-selector { 
 
    position: absolute; 
 
} 
 

 
#selected-color { 
 
    background-color: #000000; 
 
    width: 20px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id='mainDiv'> 
 
      <canvas id='g2'></canvas> 
 
      <canvas id='luminosity' width='250' height='250'></canvas> 
 
      <canvas id='hue-selector' width='15' height='15'></canvas> 
 
      <canvas id='luminosity-selector' width='15' height='15'></canvas>  
 
     </div> 
 

 
<div id='selected-color'></div>

Answer 1

哪年的车！？！？！是的，这太花了功夫...

但我做到了！只需拨打init(200)，它将制作一个尺寸为200的调色板。如果您不给它一个尺寸，则默认为250。

<html> 
    <head> 
     <style> 
      #mainDiv { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 125px; 
       height: 125px; 
       cursor: pointer; 
       z-index: 3; 
      } 

      #luminosity { 
       position: absolute; 
       left: 0px; 
       top: 0px;  
      } 

      #hue-selector { 
       position: absolute; 
      } 

      #luminosity-selector { 
       position: absolute; 
      } 

      #selected-color { 
       background-color: #000000; 
       width: 20px; 
       height: 20px; 
      } 
     </style> 
    </head> 
    <body> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <div id='mainDiv'> 
      <canvas id='g2'></canvas> 
      <canvas id='luminosity'></canvas> 
      <canvas id='hue-selector'></canvas> 
      <canvas id='luminosity-selector'></canvas>  
     </div> 

     <div id='selected-color'></div> 
     <script> 

var paletteSize = 100; 

function HSB2RGB(j, d, c) { 
    var e, g, l, h, k, b, a, m; 
    if (c == 0) { 
     return [0, 0, 0] 
    } 
    j *= 0.016666667; 
    d *= 0.01; 
    c *= 0.01; 
    h = Math.floor(j); 
    k = j - h; 
    b = c * (1 - d); 
    a = c * (1 - (d * k)); 
    m = c * (1 - (d * (1 - k))); 
    switch (h) { 
     case 0: 
      e = c; 
      g = m; 
      l = b; 
      break; 
     case 1: 
      e = a; 
      g = c; 
      l = b; 
      break; 
     case 2: 
      e = b; 
      g = c; 
      l = m; 
      break; 
     case 3: 
      e = b; 
      g = a; 
      l = c; 
      break; 
     case 4: 
      e = m; 
      g = b; 
      l = c; 
      break; 
     case 5: 
      e = c; 
      g = b; 
      l = a; 
      break 
    } 
    return [e, g, l] 
} 

function RGB2HSB(c, d, k) { 
    var j, h, e, g, b, a; 
    j = Math.min(Math.min(c, d), k); 
    a = Math.max(Math.max(c, d), k); 
    if (j == a) { 
     return [0, 0, a * 100] 
    } 
    h = (c == j) ? d - k : ((d == j) ? k - c : c - d); 
    e = (c == j) ? 3 : ((d == j) ? 5 : 1); 
    g = Math.floor((e - h/(a - j)) * 60) % 360; 
    b = Math.floor(((a - j)/a) * 100); 
    a = Math.floor(a * 100); 
    return [g, b, a] 
} 

function ColorSelector(a) { 
    this.init(a) 
} 

ColorSelector.prototype = { 
    container: null, 
    color: [0, 0, 0], 
    hueSelector: null, 
    luminosity: null, 
    luminosityData: null, 
    luminositySelector: null, 
    luminosityPosition: null, 
    dispatcher: null, 
    changeEvent: null, 

    init: function(k) { 
     var m = this, 
      b1, g2, d3; 

     this.container = document.getElementById('mainDiv') 
     this.container.addEventListener("mousedown", l, false); 
     this.container.addEventListener("touchstart", f, false); 


     g2 = document.getElementById('g2'); 
     g2.width = k.width; 
     g2.height = k.height; 

     b1 = g2.getContext("2d"); 
     b1.drawImage(k, 0, 0, g2.width, g2.height); 
     d3 = b1.getImageData(0, 0, g2.width, g2.height).data; 


     this.luminosity = document.getElementById('luminosity'); 
     this.hueSelector = document.getElementById('hue-selector'); 
     this.hueSelector.style.left = ((g2.width - paletteSize*15/250)/2) + "px"; 
     this.hueSelector.style.top = ((g2.height - paletteSize*15/250)/2) + "px"; 


     b1 = this.hueSelector.getContext("2d"); 
     b1.lineWidth = 2; 
     b1.strokeStyle = "rgba(0, 0, 0, 0.5)"; 
     b1.beginPath(); 
     b1.arc(paletteSize*8/250, paletteSize*8/250, paletteSize*6/250, 0, Math.PI * 2, true); 
     b1.stroke(); 
     b1.strokeStyle = "rgba(256, 256, 256, 0.8)"; 
     b1.beginPath(); 
     b1.arc(paletteSize*7/250, paletteSize*7/250, paletteSize*6/250, 0, Math.PI * 2, true); 
     b1.stroke(); 

     this.luminosityPosition = [(k.width - paletteSize*15/250), (k.height - paletteSize*15/250)/2]; 


     this.luminositySelector = document.getElementById('luminosity-selector'); 
     this.luminositySelector.style.left = (this.luminosityPosition[0] - paletteSize*7/250) + "px"; 
     this.luminositySelector.style.top = (this.luminosityPosition[1] - paletteSize*7/250) + "px"; 
     b1 = this.luminositySelector.getContext("2d"); 
     b1.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height); 

     this.dispatcher = document.createElement("div"); 
     this.changeEvent = document.createEvent("Events"); 
     this.changeEvent.initEvent("change", true, true); 

     function l(n) { 
      window.addEventListener("mousemove", c, false); 
      window.addEventListener("mouseup", h, false); 
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
     } 

     function c(n) { 
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
     } 

     function h(n) { 
      window.removeEventListener("mousemove", c, false); 
      window.removeEventListener("mouseup", h, false); 
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop) 
     } 

     function f(n) { 
      if (n.touches.length == 1) { 
       n.preventDefault(); 
       window.addEventListener("touchmove", a, false); 
       window.addEventListener("touchend", j, false); 
       e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop) 
      } 
     } 

     function a(n) { 
      if (n.touches.length == 1) { 
       n.preventDefault(); 
       e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop) 
      } 
     } 

     function j(n) { 
      if (n.touches.length == 0) { 
       n.preventDefault(); 
       window.removeEventListener("touchmove", a, false); 
       window.removeEventListener("touchend", j, false) 
      } 
     } 

     function e(o, t) { 
      var q, p, r, n, s; 
      q = o - paletteSize/2; 
      p = t - paletteSize/2; 
      r = Math.sqrt(q * q + p * p); 
      if (r < paletteSize*90/250) { 
       m.hueSelector.style.left = (o - paletteSize*7/250) + "px"; 
       m.hueSelector.style.top = (t - paletteSize*7/250) + "px"; 
       m.updateLuminosity([d3[(o + (t * paletteSize)) * 4], d3[(o + (t * paletteSize)) * 4 + 1], d3[(o + (t * paletteSize)) * 4 + 2]]) 
      } else { 
       if (r > paletteSize*100/250) { 
        n = q/r; 
        s = p/r; 
        m.luminosityPosition[0] = (n * paletteSize*110/250) + paletteSize/2; 
        m.luminosityPosition[1] = (s * paletteSize*110/250) + paletteSize/2; 
        m.luminositySelector.style.left = (m.luminosityPosition[0] - paletteSize*7/250) + "px"; 
        m.luminositySelector.style.top = (m.luminosityPosition[1] - paletteSize*7/250) + "px" 
       } 
      } 
      o = Math.floor(m.luminosityPosition[0]); 
      t = Math.floor(m.luminosityPosition[1]); 
      m.color[0] = m.luminosityData[(o + (t * paletteSize)) * 4]; 
      m.color[1] = m.luminosityData[(o + (t * paletteSize)) * 4 + 1]; 
      m.color[2] = m.luminosityData[(o + (t * paletteSize)) * 4 + 2]; 
      m.dispatchEvent(m.changeEvent) 
     } 
    }, 
    getColor: function() { 
     return this.color 
    }, 
    setColor: function(c) { 
     var a, e, f, d, b = Math.PI/180; 
     this.color = c; 
     a = RGB2HSB(c[0]/255, c[1]/255, c[2]/255); 
     e = a[0] * b; 
     f = (a[1]/100) * 90; 
     this.hueSelector.style.left = ((Math.cos(e) * f + paletteSize/2) - 7) + "px"; 
     this.hueSelector.style.top = ((Math.sin(e) * f + paletteSize/2) - paletteSize*7/250) + "px"; 
     d = HSB2RGB(a[0], a[1], 100); 
     d[0] *= 255; 
     d[1] *= 255; 
     d[2] *= 255; 
     this.updateLuminosity(d); 
     e = (a[2]/100) * 360 * b; 
     this.luminosityPosition[0] = (Math.cos(e) * paletteSize*110/250) + paletteSize/2; 
     this.luminosityPosition[1] = (Math.sin(e) * paletteSize*110/250) + paletteSize/2; 
     this.luminositySelector.style.left = (this.luminosityPosition[0] - paletteSize*7/250) + "px"; 
     this.luminositySelector.style.top = (this.luminosityPosition[1] - paletteSize*7/250) + "px"; 
     this.dispatchEvent(this.changeEvent) 
    }, 
    updateLuminosity: function(j) { 
     var d, f, l, g, p, b, a, o = paletteSize*100/250, 
      h = paletteSize*120/250, 
      k, n = paletteSize*1080/250/2, 
      e = 1/n, 
      c = Math.PI/180, 
      m = (n/360); 
     b = this.luminosity.width/2; 
     a = this.luminosity.height/2; 
     d = this.luminosity.getContext("2d"); 
     d.lineWidth = 3; 
     d.clearRect(0, 0, this.luminosity.width, this.luminosity.height); 
     for (k = 0; k < n; k++) { 
      f = k/m * c; 
      l = Math.cos(f); 
      g = Math.sin(f); 
      p = 255 - (k * e) * 255; 
      d.strokeStyle = "rgb(" + Math.floor(j[0] - p) + "," + Math.floor(j[1] - p) + "," + Math.floor(j[2] - p) + ")"; 
      d.beginPath(); 
      d.moveTo(l * o + b, g * o + a); 
      d.lineTo(l * h + b, g * h + a); 
      d.stroke() 
     } 
     this.luminosityData = d.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data 
    }, 
    addEventListener: function(b, c, a) { 
     this.dispatcher.addEventListener(b, c, a) 
    }, 
    dispatchEvent: function(a) { 
     this.dispatcher.dispatchEvent(a) 
    }, 
    removeEventListener: function(b, c, a) { 
     this.dispatcher.removeEventListener(b, c, a) 
    } 
}; 

function Palette() { 
    var canvas, canvasCtx, canvasHalfWidth, canvasHalfHeight, n = paletteSize*90/250, 
     m = 1080, 
     f = 1/m, 
     l = m/360, 
     c = Math.PI/180, 
     j, h, k, g, canvasGradient; 
    canvas = document.createElement("canvas"); 
    canvas.width = paletteSize; 
    canvas.height = paletteSize; 
    canvasHalfWidth = canvas.width/2; 
    canvasHalfHeight = canvas.height/2; 
    canvasCtx = canvas.getContext("2d"); 
    canvasCtx.lineWidth = 1; 
    for (j = 0; j < m; j++) { 
     h = j/l * c; 
     k = Math.cos(h); 
     g = Math.sin(h); 
     canvasCtx.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)"; 
     canvasCtx.beginPath(); 
     canvasCtx.moveTo(k + canvasHalfWidth, g + canvasHalfHeight); 
     canvasCtx.lineTo(k * n + canvasHalfWidth, g * n + canvasHalfHeight); 
     canvasCtx.stroke() 
    } 
    canvasGradient = canvasCtx.createRadialGradient(canvasHalfWidth, canvasHalfWidth, 0, canvasHalfWidth, canvasHalfWidth, n); 
    canvasGradient.addColorStop(0, "rgba(255, 255, 255, 1)"); 
    canvasGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); 
    canvasCtx.fillStyle = canvasGradient; 
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height); 
    return canvas 
} 
/* ADDED END */ 

var SCREEN_WIDTH = window.innerWidth, 
    SCREEN_HEIGHT = window.innerHeight, 
    COLOR = [0, 0, 0], 
    i, 
    container, foregroundColorSelector, canvas, flattenCanvas, context; 
init(); 

function init(newPaletteSize) { 

    paletteSize = newPaletteSize || 250; 

    var mainDiv = document.getElementById('mainDiv'); 
    mainDiv.width = paletteSize/2; 
    mainDiv.height = paletteSize/2; 

    var luminosity = document.getElementById('luminosity'); 
    luminosity.width = paletteSize; 
    luminosity.height = paletteSize; 

    var hueselector = document.getElementById('hue-selector'); 
    hueselector.width = paletteSize*15/250; 
    hueselector.height = paletteSize*15/250; 

    var luminosityselector = document.getElementById('luminosity-selector'); 
    luminosityselector.width = paletteSize*15/250; 
    luminosityselector.height = paletteSize*15/250; 

    var selectedcolor = document.getElementById('selected-color'); 
    selectedcolor.style.width = paletteSize*20/250; 
    selectedcolor.style.height = paletteSize*20/250; 

    var hash, palette; 
    container = document.createElement("div"); 

    document.body.appendChild(container); 
    canvas = document.createElement("canvas"); 
    canvas.width = paletteSize;//SCREEN_WIDTH; 
    canvas.height = paletteSize;//SCREEN_HEIGHT; 
    canvas.style.cursor = "crosshair"; 
    container.appendChild(canvas); 
    context = canvas.getContext("2d"); 
    palette = new Palette(); 
    foregroundColorSelector = new ColorSelector(palette); 
    foregroundColorSelector.addEventListener("change", onForegroundColorSelectorChange, false); 
    container.appendChild(foregroundColorSelector.container); 

    foregroundColorSelector.setColor(COLOR); 
    fillBox(COLOR); 
} 

function onForegroundColorSelectorChange(a) { 
    fillBox(foregroundColorSelector.getColor()); 
} 

function fillBox(color) { 
    $('#selected-color').css('background-color', 'rgb('+color[0]+','+color[1]+','+color[2]+')'); 
} 
     </script> 
    </body> 
</html> 

Answer 2

我做了一个评论这件事，但我会试着去也回答。

基本上，这里的主要问题是，这种代码是不写是灵活的。它被写成具有非常特定的大小，并且您的代码始终假定大小没有变化。要操纵调色板的大小，您将不得不更换与大小相关的硬编码值（或“幻数”）的实例EVERY。你需要更新你的代码，使其更加“动态”。

你可以简单地通过Palette大小。为了建立调色板的初始大小。 例子：palette = new Palette(200);

当然，你必须更新Palette功能

function Palette(paletteSize) { 
    ... 
    /* Previously * 
    canvas.width = 250; 
    canvas.height = 250; 

    /* Now it is */ 
    canvas.width = paletteSize; 
    canvas.height = paletteSize; 
    ... 
} 

而且代码的其余部分了。

例如，从updateLuminosity功能片段：

... 
var d, f, l, g, p, b, a, o = 100, 
    h = 120, 
    k, n = 1080/2, 
    e = 1/n, 
    c = Math.PI/180, 
    m = (n/360); 
    b = this.luminosity.width/2; 
    a = this.luminosity.height/2; 

d.moveTo(l * o + b, g * o + a); 
d.lineTo(l * h + b, g * h + a); 
... 

据我所知，o和h是内半径和外半径，分别，光度环的。您必须将这些值更改为o = paletteSize*100/250的效果。您已根据调色板的大小（100为250调色板）选择了首选亮度环。乘以100/250乘以paletteSize将始终保持该比率。您可以将此原则应用于代表维度的其他变量，以便快速更新代码库而不会影响当前布局。

希望这可以给你一个足够好的想法来改变。祝你好运！

编辑：我有一个演示页面“动态调整大小的灵活性。” Open this in a new window and Re-size the height and width.