如何用html制作彩虹,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);

}

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

解决方法:

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

HTML：

使用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