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

我想以一些聪明的方式使用渐变生成画布图像.我希望图像看起来像这样：

我只是无法理解它.我需要在窗体和圆弧中生成线条 – 或者以一些聪明的方式使用带有颜色停止的渐变.如果我转换为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);
}

有没有人有关于如何使用画布生成此图像的聪明提示？

解决方法:

这不完美(由于绘图步骤……),但它可以帮助您：

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会使渐变看起来像您的图形).

标签：javascript,canvas,rgb,color-space,hsl
来源： https://codeday.me/bug/20190715/1467731.html