Question

我有以下代码在画布中创建一系列动画系列。我想根据被点击的某些DOM元素更改画布中绘制的上下文。

我有以下html：

  <style>
  *{
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
  }

 .c{
  background: black;}
 </style>

<canvas class='c'>waves</canvas>
  <div style="width:100%; height:100%; position:absolute; top:0; left:0;">
<center>
  <img id="click" style="margin:0 auto; position:relative; top:20%; width:360px; height:auto;" src="img.png" alt="" >
</center>
  </div>
    <script src="js/index.js"></script>  
  </body>

以下javascript：

var c = document.querySelector('.c'), 
w, h,
ctx = c.getContext('2d'), 

x0, y0, x, y, 
t = 0, t_step = 1/200, 
u = 5, m, 
tmp, 


ceil = Math.ceil, 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
PI = Math.PI, sin = Math.sin, cos = Math.cos;

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)) + 50;
};

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

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

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

    for(x = 0; x < w; x++) {
      y =  u*sin(x/6/(16*i/m + 1) - w*(i/m + 1)*t/120) + 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);
};

setTimeout(function() {

  initCanvas();
  wave();

  addEventListener('resize', initCanvas, false);
}, 15);

最终，我希望能够单击图像并更改正在绘制的画布，特别是波形函数以重绘新动画或更改动画的属性，如hsl值。我试过写一个点击功能，但无济于事。任何人都可以帮我澄清一下如何改变画布吗？

Answer 1

你只需要#click上的点击处理程序来改变你的波色？

$('#click').on('click',function(){
  m = ceil(w/(10*u)) + Math.random()*10*8;
});

示例代码和演示：

var c = document.querySelector('.c'), 
w, h,
ctx = c.getContext('2d'), 

x0, y0, x, y, 
t = 0, t_step = 1/200, 
u = 5, m, 
tmp, 


ceil = Math.ceil, 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
PI = Math.PI, sin = Math.sin, cos = Math.cos;

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)) + 25;
};

var wave = function () {
  ctx.clearRect(0, 0, w, h);
  ctx.lineWidth = 2;

  for(var i = 0; i < m; i++) {
    x0 = -20;
    y0 = i*2*u;

    ctx.beginPath();
    ctx.moveTo(x0, y0);

    for(x = 0; x < w; x++) {
      y =  u*sin(x/6/(16*i/m + 1) - w*(i/m + 1)*t/120) + 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);

$('#click').on('click',function(){
  m = ceil(w/(10*u)) + Math.random()*10*8;
});

initCanvas();
wave();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on sun to <br>change wave colors.</h4>
<canvas class='c'>waves</canvas>
<div style="width:100%; height:100%; position:absolute; top:0; left:0;">
  <center>
    <img id="click" style="margin:0 auto; position:relative; top:35%; width:100px; height:auto;" src="https://dl.dropboxusercontent.com/u/139992952/multple/sunny.png" alt="" >
  </center>

onclick功能按钮更改画布

1 个答案: