javascript更改颜色html,javascript – 如何更改此(纯js)的颜色？

我试图将这个mousefollow实现到我的网站：

但我想要自己的自定义颜色而不是默认显示的颜色.我更改了fillcolor值,并且能够更改为一种特定的颜色,但我想要4种不同的颜色.所以我尝试在fillColor旁边为这个函数添加特定颜色：但没有这样的运气.我还创建了一个fillcolor2：属性,如：

for (var i = 0; i < QUANTITY; i++) {

var particle = {

size: 1,

position: { x: mouseX, y: mouseY },

offset: { x: 0, y: 0 },

shift: { x: mouseX, y: mouseY },

speed: 0.01+Math.random()*0.04,

targetSize: 1,

fillColor: '#bf3e27',

fillColor2: '#1c305c',

orbit: RADIUS*.1 + (RADIUS * .5 * Math.random())

};

并补充说：

context.fillStyle = particle.fillColor2;

context.strokeStyle = particle.fillColor2;

但这也不起作用.我还尝试复制并粘贴相同的js代码,只是为了查看它是否可行,并且只是更改了fillcolor,但它只会显示最后粘贴的颜色.

任何人都可以告诉我如何以最简单的方式获得4种不同的颜色,我觉得我非常过于复杂,但显然是初学者而且对此感到非常沮丧？

最后,我希望4种不同的颜色可以跨越不同的半径,并且我使用不同的RADIUS变量进行了混乱,但是如果只有一种颜色,几乎不可能弄清楚如何实现我想要的颜色.因此每种颜色会有4种,我将QUANTITY更改为：

var QUANTITY = 16;

我需要前4个颜色半径10,所以对于我设置的第一个颜色：

var RADIUS = 10;

理想情况下,我需要前4个颜色(#AAAAAA)半径为10,但需要第二个4为半径10和30之间的颜色(#BBBBBBB),第三个颜色(#CCCCCC)在半径之间30-50,最后的第四种颜色(#DDDDDD)在50到70之间.

有什么建议？

解决方法:

您可以使用这些数组替换QUANTITY,COLOR和RADIUS的定义,同时定义RADIUS的范围：

var GROUPS = [

{

QUANTITY: 4,

RADIUS: [ 5, 10],

COLOR: 0x888888

},

{

QUANTITY: 4,

RADIUS: [10, 30],

COLOR: 0xAA80AA

},

{

QUANTITY: 4,

RADIUS: [30, 50],

COLOR: 0xA0A0CC

},

{

QUANTITY: 4,

RADIUS: [50, 70],

COLOR: 0xFFE0E0

}

];

然后在createParticles函数内部迭代这些GROUPS：

for (var g = 0; g < GROUPS.length; g++) {

var attribs = GROUPS[g];

for (var i = 0; i < attribs.QUANTITY; i++) {

var particle = {

size: 1,

position: { x: mouseX, y: mouseY },

offset: { x: 0, y: 0 },

shift: { x: mouseX, y: mouseY },

speed: 0.01+Math.random()*0.04,

targetSize: 1,

fillColor: '#' + attribs.COLOR.toString(16),

orbit: attribs.RADIUS[0] +

(attribs.RADIUS[1]-attribs.RADIUS[0]) * Math.random()

};

particles.push( particle );

}

}

这是一个片段：

// One of my first experiments, woop! :D

var SCREEN_WIDTH = window.innerWidth;

var SCREEN_HEIGHT = window.innerHeight;

var GROUPS = [

{

QUANTITY: 4,

RADIUS: [ 5, 10],

COLOR: 0x888888

},

{

QUANTITY: 4,

RADIUS: [10, 30],

COLOR: 0xAA80AA

},

{

QUANTITY: 4,

RADIUS: [30, 50],

COLOR: 0xA0A0CC

},

{

QUANTITY: 4,

RADIUS: [50, 70],

COLOR: 0xFFE0E0

}

];

var RADIUS_SCALE = 1;

var RADIUS_SCALE_MIN = 1;

var RADIUS_SCALE_MAX = 1.5;

var canvas;

var context;

var particles;

var mouseX = SCREEN_WIDTH * 0.5;

var mouseY = SCREEN_HEIGHT * 0.5;

var mouseIsDown = false;

function init() {

canvas = document.getElementById( 'world' );

if (canvas && canvas.getContext) {

context = canvas.getContext('2d');

// Register event listeners

window.addEventListener('mousemove', documentMouseMoveHandler, false);

window.addEventListener('mousedown', documentMouseDownHandler, false);

window.addEventListener('mouseup', documentMouseUpHandler, false);

document.addEventListener('touchstart', documentTouchStartHandler, false);

document.addEventListener('touchmove', documentTouchMoveHandler, false);

window.addEventListener('resize', windowResizeHandler, false);

createParticles();

windowResizeHandler();

setInterval( loop, 1000 / 60 );

}

}

function createParticles() {

particles = [];

for (var g = 0; g < GROUPS.length; g++) {

var attribs = GROUPS[g];

for (var i = 0; i < attribs.QUANTITY; i++) {

var particle = {

size: 1,

position: { x: mouseX, y: mouseY },

offset: { x: 0, y: 0 },

shift: { x: mouseX, y: mouseY },

speed: 0.01+Math.random()*0.04,

targetSize: 1,

fillColor: '#' + attribs.COLOR.toString(16),

orbit: attribs.RADIUS[0] +

(attribs.RADIUS[1]-attribs.RADIUS[0]) * Math.random()

};

particles.push( particle );

}

}

}

function documentMouseMoveHandler(event) {

mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5;

mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5;

}

function documentMouseDownHandler(event) {

mouseIsDown = true;

}

function documentMouseUpHandler(event) {

mouseIsDown = false;

}

function documentTouchStartHandler(event) {

if(event.touches.length == 1) {

event.preventDefault();

mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;

mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;

}

}

function documentTouchMoveHandler(event) {

if(event.touches.length == 1) {

event.preventDefault();

mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;

mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;

}

}

function windowResizeHandler() {

SCREEN_WIDTH = window.innerWidth;

SCREEN_HEIGHT = window.innerHeight;

canvas.width = SCREEN_WIDTH;

canvas.height = SCREEN_HEIGHT;

}

function loop() {

if( mouseIsDown ) {

RADIUS_SCALE += ( RADIUS_SCALE_MAX - RADIUS_SCALE ) * (0.02);

}

else {

RADIUS_SCALE -= ( RADIUS_SCALE - RADIUS_SCALE_MIN ) * (0.02);

}

RADIUS_SCALE = Math.min( RADIUS_SCALE, RADIUS_SCALE_MAX );

context.fillStyle = 'rgba(0,0,0,0.05)';

context.fillRect(0, 0, context.canvas.width, context.canvas.height);

for (i = 0, len = particles.length; i < len; i++) {

var particle = particles[i];

var lp = { x: particle.position.x, y: particle.position.y };

// Rotation

particle.offset.x += particle.speed;

particle.offset.y += particle.speed;

// Follow mouse with some lag

particle.shift.x += ( mouseX - particle.shift.x) * (particle.speed);

particle.shift.y += ( mouseY - particle.shift.y) * (particle.speed);

// Apply position

particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * (particle.orbit*RADIUS_SCALE);

particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * (particle.orbit*RADIUS_SCALE);

// Limit to screen bounds

particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 );

particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 );

particle.size += ( particle.targetSize - particle.size ) * 0.05;

if( Math.round( particle.size ) == Math.round( particle.targetSize ) ) {

particle.targetSize = 1 + Math.random() * 7;

}

context.beginPath();

context.fillStyle = particle.fillColor;

context.strokeStyle = particle.fillColor;

context.lineWidth = particle.size;

context.moveTo(lp.x, lp.y);

context.lineTo(particle.position.x, particle.position.y);

context.stroke();

context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);

context.fill();

}

}

window.onload = init;

body {

background-color: #000000;

padding: 0;

margin: 0;

overflow: hidden;

}

标签：javascript

来源： https://codeday.me/bug/20190528/1167346.html