Question

我有一个当前为线条设置动画的canvas元素。但是我想创建一个存储函数数组，用于更改画布中动画的那些线的数量和颜色。

因此，当我单击一个特定元素时，它将选择一个数组中的一个函数，这些函数将颜色，速度，行宽，幅度等改变为其中一个函数。

所以，让我说我有一系列功能，设置= [A，B，C，D]; 其中A到D是改变画布的函数。

最终，我想要它，以便当我点击一个元素时，我随机地将画布元素的设置更改为A，B，C或D中的那些。

我有以下代码，但我无法重构点击功能以包含一系列设置来分离功能。有什么帮助吗？

以下是我目前的代码：

var c = document.querySelector('.c') /* canvas element */, 
w /* canvas width */, h /* canvas height */,
ctx = c.getContext('2d') /* canvas context */, 

/* previous & current coordinates */
x0, y0, x, y, 
t = 0, t_step = 1/600, 
u = 4, m, 
tmp, 

/* just me being lazy */
ceil = Math.ceil, 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
PI = Math.PI, sin = Math.sin, cos = Math.cos;


/* FUNCTIONS */
/* a random number between min & max */
var rand = function(max, min) {
 var b = (max === 0 || max) ? max : 1, a = min || 0;

 return a + (b - a)*Math.random();
 };

var trimUnit = function(input_str, unit) {
 return parseInt(input_str.split(unit)[0], 10);
};

var initCanvas = function() {
  var s = getComputedStyle(c);

  w = c.width = trimUnit(s.width, 'px');
  h = c.height = trimUnit(s.height, 'px');

  m = ceil(w/(10*u)) + 90;
};

var wave = function () {
  ctx.clearRect(0, 0, w, h);
  ctx.lineWidth = 1.75;

  for(var i = 0; i < m; i++) {
    x0 = -80;
    y0 = i*4*u;

    ctx.beginPath();
    ctx.moveTo(x0, y0);

    for(x = 0; x < w; x++) {
      y =  u*sin(x/4/(10*i/m + 1) - w*(i/m + 2)*t/20) + i*2*u;

      ctx.lineTo(x, y);

      x0 = x;
      y0 = y;
    }
    ctx.strokeStyle = 'hsl(' + i*360/m + ', 100%, 70%)';
    ctx.stroke();
  }

  t += t_step;


  requestAnimationFrame(wave);
};


 addEventListener('resize', initCanvas, false);


initCanvas();
wave();


/*Moods*/
 var red  = function () {
  ctx.clearRect(0, 0, w, h);
  ctx.lineWidth = 10;

  for(var i = 0; i < m; i++) {
    x0 = -100;
    y0 = i*8*u;

    ctx.beginPath();
    ctx.moveTo(x0, y0);

    for(x = 0; x < w; x++) {
      y =  u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;

      ctx.lineTo(x, y);

      x0 = x;
      y0 = y;
    }

var gradient=ctx.createLinearGradient(0,1000,0,0);
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.5","red");
gradient.addColorStop("1.0","pink");

ctx.strokeStyle = gradient;
ctx.stroke();
  }

  t += t_step;

  requestAnimationFrame(red);
};

var blue = function () {
  ctx.clearRect(0, 0, w, h);
  ctx.lineWidth = 1.5;

  for(var i = 0; i < m; i++) {
    x0 = -100;
    y0 = i*8*u;

    ctx.beginPath();
    ctx.moveTo(x0, y0);

    for(x = 0; x < w; x++) {
      y =  u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;

      ctx.lineTo(x, y);

      x0 = x;
      y0 = y;
     }

var gradient=ctx.createLinearGradient(0,1000,0,0);
gradient.addColorStop("0.1","lightblue");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","white");

    ctx.strokeStyle = gradient;
    ctx.stroke();
  }

  t += t_step;

  requestAnimationFrame(blue);
 };

/*Mood Functions Above This Point*/

function hundred(min, max) {
  return Math.random() * (max - min) + min;
 }

$('#click').on('click',function(){

    $(".c").fadeOut('700');

    setTimeout(function(){
       $(".c").fadeIn('900');
    },100);

    setTimeout(function(){
  m = ceil(w/(10*u)) +  hundred(0,100);Math.random()*60*9;
    /*m = ceil(w/(10*u)) + 100;*/

  u = hundred(2,6)
  },100);

  blue();
});

Answer 1

你的大多数红色（）＆amp; blue（）代码完全相同，因此使用公共代码（animate()）创建1个动画循环。

渐变很昂贵，因此在应用开始时创建一次渐变并将它们存储在对象（gradients{}）中。

声明gradientMix变量，告诉animate()使用哪个渐变。

以下是重构代码：

// gradients are expensive so create them once at the start of the app
var gradients={};
gradients['red']=addGradient('orange','red','pink');
gradients['blue']=addGradient('lightblue','blue','white');
var gradientMix='blue';

// animate function with common code
function animate(time){
  ctx.clearRect(0, 0, w, h);
  ctx.lineWidth = 1.5;

  for(var i = 0; i < m; i++) {
      x0 = -100;
      y0 = i*8*u;

      ctx.beginPath();
      ctx.moveTo(x0, y0);

      for(x = 0; x < w; x++) {
        y =  u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;

        ctx.lineTo(x, y);

        x0 = x;
        y0 = y;
       }

      // set the strokeStyle to the selected gradient mix
      ctx.strokeStyle = gradients[gradientMix];
      ctx.stroke();
  }

  t += t_step;

  requestAnimationFrame(animate);
 };


function addGradient(color,g1,g2,g3){
    var gradient=ctx.createLinearGradient(0,1000,0,0);
    gradient.addColorStop("0.1",g1);
    gradient.addColorStop("0.5",g2);
    gradient.addColorStop("1.0",g3);
}

将画布更改为特定变量onclick

1 个答案: