如何使用 HTML5 画布生成彩虹圈？

Question

我想以某种巧妙的方式使用渐变生成画布图像。我希望图像看起来像这样：

我就是想不通。我需要以形式和弧线生成线条 - 或以某种巧妙的方式使用带有色标的渐变。如果我转换为 HSL 并只检查 HUE 值，也许会容易得多？

例如，我可以采用矩形格式

for (var i = 0; i < h; ++i) {
  var ratio = i/h;
  var hue = Math.floor(360*ratio);
  var sat = 100;
  var lum = 50;
  line(dc, hslColor(hue,sat,lum), left_margin, top_margin+i, left_margin+w, top_margin+i);
}

有人有关于如何使用画布制作此图像的任何巧妙技巧吗？

Answer 1

这并不完美（由于绘图步骤......），但它可以帮助你：

http://jsfiddle.net/afkLY/2/

HTML：

<canvas id="colors" width="200" height="200"></canvas>

Javascript：

var canvas = document.getElementById("colors");
var graphics = canvas.getContext("2d");

var CX = canvas.width / 2,
    CY = canvas.height/ 2,
    sx = CX,
    sy = CY;

for(var i = 0; i < 360; i+=0.1){
    var rad = i * (2*Math.PI) / 360;
    graphics.strokeStyle = "hsla("+i+", 100%, 50%, 1.0)";   
    graphics.beginPath();
    graphics.moveTo(CX, CY);
    graphics.lineTo(CX + sx * Math.cos(rad), CY + sy * Math.sin(rad));
    graphics.stroke();
}

思路是用与线方向对应的色调值逐行绘制圆盘。

您可以通过向 rad 变量添加半径角度来更改颜色基础旋转（将 -pi/2 添加到 rad 会使渐变看起来像您的图形）。

编辑： 我做了一个新的演示，稍微概括了这个概念并渲染了一个彩虹多边形。这是CodePen。 为了消除颜色之间的小空隙，我使用了溢出到下一个颜色部分的四边形，除了最后一个。

Answer 2

小幅调整使其具有白色中心

var canvas = document.getElementById('colorPicker'); var graphics = canvas.getContext("2d");

        var CX = canvas.width / 2,
            CY = canvas.height / 2,
            sx = CX,
            sy = CY;

        for (var i = 0; i < 360; i += 0.1) {
            var rad = i * (2 * Math.PI) / 360;
            var grad = graphics.createLinearGradient(CX, CY, CX + sx * Math.cos(rad), CY + sy * Math.sin(rad));
            grad.addColorStop(0, "white");
            grad.addColorStop(0.01, "white");
            grad.addColorStop(0.99, "hsla(" + i + ", 100%, 50%, 1.0)");
            grad.addColorStop(1, "hsla(" + i + ", 100%, 50%, 1.0)");
            graphics.strokeStyle = grad;
            graphics.beginPath();
            graphics.moveTo(CX, CY);
            graphics.lineTo(CX + sx * Math.cos(rad), CY + sy * Math.sin(rad));
            graphics.stroke();
        }

Answer 3

这是一种替代方法，它采用了功能性更强的方法：

var canvas = document.getElementById("radial"),
    ctx = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    center = { x: width/2, y: height/2 },
    diameter = Math.min(width, height);

var distanceBetween = function(x1,y1,x2,y2) {
  // Get deltas
  var deltaX = x2 - x1,
      deltaY = y2 - y1;

  // Calculate distance from center
  return Math.sqrt(deltaX*deltaX+deltaY*deltaY);  
}

var angleBetween = function(x1,y1,x2,y2) {
  // Get deltas
  var deltaX = x2 - x1,
      deltaY = y2 - y1;

  // Calculate angle
  return Math.atan2(deltaY, deltaX);
}

var radiansToDegrees = _.memoize(function(radians) {
    // Put in range of [0,2PI)
  if (radians < 0) radians += Math.PI * 2;

  // convert to degrees
  return radians * 180 / Math.PI; 
})

// Partial application of center (x,y)
var distanceFromCenter = _.bind(distanceBetween, undefined, center.x, center.y)
var angleFromCenter = _.bind(angleBetween, undefined, center.x, center.y)

// Color formatters
var hslFormatter = function(h,s,l) { return "hsl("+h+","+s+"%,"+l+"%)"; },
    fromHue = function(h) { return hslFormatter(h,100,50); };

// (x,y) => color
var getColor = function(x,y) {
  // If distance is greater than radius, return black
  return (distanceFromCenter(x,y) > diameter/2)
    // Return black
    ? "#000"
    // Determine color
    : fromHue(radiansToDegrees(angleFromCenter(x,y)));
};

for(var y=0;y<height;y++) {
  for(var x=0;x<width;x++) {
    ctx.fillStyle = getColor(x,y);
    ctx.fillRect( x, y, 1, 1 );
  }
}

它使用一个函数来计算每个像素的颜色——这不是最有效的实现，但也许你会从中收集到一些有用的信息。

请注意，它使用underscore 来表示一些帮助函数，例如bind()（用于部分应用程序）和memoize。

Codepen 用于实验。