相对位置的渐变 html,沿HTML5画布路径的连续渐变

行插值函数，用于绘制从前一个鼠标位置到当前位置的一行中的每个段

颜色插值功能，它根据长度，位置和线段大小，采用一系列颜色并在两种当前颜色之间进行插值。

醇>

调整参数，例如段大小，数组中的颜色数等，以获得最佳结果。

线插值函数

function plotLine(ctx, x1, y1, x2, y2) {

var diffX = Math.abs(x2 - x1), // get line length

diffY = Math.abs(y2 - y1),

dist = Math.sqrt(diffX * diffX + diffY * diffY),

step = dist / 10, // define some resolution

i = 0, t, b, x, y;

while (i <= dist) { // render circles along the line

t = Math.min(1, i / dist);

x = x1 + (x2 - x1) * t;

y = y1 + (y2 - y1) * t;

ctx.fillStyle = getColor(); // get current color

ctx.beginPath();

ctx.arc(x, y, 10, 0, Math.PI*2);

ctx.fill();

i += step;

}

颜色插值函数

function getColor() {

var r, g, b, t, c1, c2;

c1 = colors[cIndex]; // get current color from array

c2 = colors[(cIndex + 1) % maxColors]; // get next color

t = Math.min(1, total / segment); // calculate t

if (++total > segment) { // rotate segment

total = 0;

if (++cIndex >= maxColors) cIndex = 0; // rotate color array

}

r = c1.r + (c2.r - c1.r) * t; // interpolate color

g = c1.g + (c2.g - c1.g) * t;

b = c1.b + (c2.b - c1.b) * t;

return "rgb(" + (r|0) + "," + (g|0) + "," + (b|0) + ")";

}

演示

将它们放在一起将允许您绘制渐变线。如果您不想手动绘制它们，只需在需要时调用plotLine()函数。

＆＃13;

＆＃13;

// Some setup code

var c = document.querySelector("canvas"),

ctx = c.getContext("2d"),

colors = [

{r: 255, g: 0, b: 0},

{r: 255, g: 255, b: 0},

{r: 0, g: 255, b: 0},

{r: 0, g: 255, b: 255},

{r: 0, g: 0, b: 255},

{r: 255, g: 0, b: 255},

{r: 0, g: 255, b: 255},

{r: 0, g: 255, b: 0},

{r: 255, g: 255, b: 0},

],

cIndex = 0, maxColors = colors.length,

total = 0, segment = 500,

isDown = false, px, py;

setSize();

c.onmousedown = c.ontouchstart = function(e) {

isDown = true;

var pos = getPos(e);

px = pos.x;

py = pos.y;

};

window.onmousemove = window.ontouchmove = function(e) {if (isDown) plot(e)};

window.onmouseup = window.ontouchend = function(e) {

e.preventDefault();

isDown = false

};

function getPos(e) {

e.preventDefault();

if (e.touches) e = e.touches[0];

var r = c.getBoundingClientRect();

return {

x: e.clientX - r.left,

y: e.clientY - r.top

}

}

function plot(e) {

var pos = getPos(e);

plotLine(ctx, px, py, pos.x, pos.y);

px = pos.x;

py = pos.y;

}

function plotLine(ctx, x1, y1, x2, y2) {

var diffX = Math.abs(x2 - x1),

diffY = Math.abs(y2 - y1),

dist = Math.sqrt(diffX * diffX + diffY * diffY),

step = dist / 50,

i = 0,

t, b, x, y;

while (i <= dist) {

t = Math.min(1, i / dist);

x = x1 + (x2 - x1) * t;

y = y1 + (y2 - y1) * t;

ctx.fillStyle = getColor();

ctx.beginPath();

ctx.arc(x, y, 10, 0, Math.PI*2);

ctx.fill();

i += step;

}

function getColor() {

var r, g, b, t, c1, c2;

c1 = colors[cIndex];

c2 = colors[(cIndex + 1) % maxColors];

t = Math.min(1, total / segment);

if (++total > segment) {

total = 0;

if (++cIndex >= maxColors) cIndex = 0;

}

r = c1.r + (c2.r - c1.r) * t;

g = c1.g + (c2.g - c1.g) * t;

b = c1.b + (c2.b - c1.b) * t;

return "rgb(" + (r|0) + "," + (g|0) + "," + (b|0) + ")";

}

}

window.onresize = setSize;

function setSize() {

c.width = window.innerWidth;

c.height = window.innerHeight;

}

document.querySelector("button").onclick = function() {

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

};＆＃13;

html, body {background:#777; margin:0; overflow:hidden}

canvas {position:fixed;left:0;top:0;background: #333}

button {position:fixed;left:10px;top:10px}＆＃13;

Clear＆＃13;＆＃13;＆＃13;

TIPS：