Изменить цвет линии с движением мяча

Question

Мне пришлось переместить круг по линии

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

Я хочу изменить цвет линии с серого на красный с движением мяча.Я пытался это

function rancolour() 
{ 
   var red = Math.floor(Math.random() *255); 
   var green = Math.floor(Math.random() *255); 
   var blue = Math.floor(Math.random() * 255); 
   ctx1.color = 'rgb('+red+','+green+','+blue+')'; 
}

Могу ли я чем-нибудь помочь ??Оба являются холстом.

Answer 1

Если ваша линия начинается с (x1,y1) и заканчивается на (x2,y2), с вашей текущей позицией (x,y), тогда вы можете рассчитать требуемый цвет RGB в каждой точке с помощью:

var percent=((x2-x)*(x2-x)+(y2-y)*(y2-y))/((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
ctx1.color='rgb('+(128*(1-percent)+255*percent)+','+(128*(1-percent))+','+(128*(1-percent))+')';

Этоизменит цвет вашего мяча с серого rgb(128,128,128) на красный rgb(255,0,0).