如何沿 x 轴移动画布构建的波形

Question

我已经绘制了一个可以由用户操作的波形。波形很容易在画布的 y 轴上下移动，但我很难沿 x 轴移动波形。

我添加了working copy to codePen

HTML：

 <div id="oscilloscope">
<canvas id="canvas" width=400 height=300></canvas>

<div class="dials">

  <section class="model-15">
    <div class="checkbox">
      <input id="sin" type="checkbox" value="sin">
      <label></label>
    </div>
  </section>

  <div id="focus">
    <input id="blur" class="knob" data-width="50" data-fgColor="#AA3939" data-min="0" data-max="15" data-displayPrevious=true value="0">
    <div class="label_focus">Focus</div>
  </div>

  <div id="intensity">
    <input id="intense" class="knob" data-width="50" data-fgColor="#AA7439" data-min="1" data-max="9" data-displayPrevious=true value="9">
    <div class="label_intensity">Intensity</div>
  </div>

  <div id="xmove">
    <input id="xpos" class="knob" data-width="50" data-min="-20" data-max="420" data-displayPrevious=true value="200" data-fgColor="#F890C8">
    <div class="label_xpos">X-Pos</div>
  </div>

  <div id="ymove">
    <input id="ypos" class="knob" data-width="50" data-min="-20" data-max="320" data-displayPrevious=true value="150" data-fgColor="#ad648c">
    <div class="label_ypos">Y-Pos</div>
  </div>

  <div id="volts">
    <input id="sin-f" class="knob" data-width="100" data-min="1" data-max="50" data-displayPrevious=true value="5">
    <div class="label_volts">Volts/Div</div>
  </div>

  <div id="time_delay">
    <input id="period" class="knob" data-width="100" data-fgColor="#FF4D4D" data-min="1" data-max="25" data-displayPrevious=true value="1">
    <div class="label_delay">Delay</div>
  </div>

  <div id="volts_ch2">
    <input id="amps" class="knob" data-width="100" data-min="1" data-displayPrevious=true value="5" data-fgColor="#66cc66">
    <div class="label_volts2">Volts/Div</div>

  </div>

我一直在处理的 JS 代码的主要元素。

 function drawWave() {

ctx.strokeStyle = 'rgba(25, 255, 50, 0.8)';  //sets waveform stroke colour & Size
console.log ("sinFreq: " + sinFrequency);
example = intensity.value/10;
ctx.globalAlpha= example;
ctx.shadowBlur = fuzz.value; 


// omega = 2 * pi * f
function getOmega(frequency) {
  return 2 * Math.PI * frequency;
}

// pixel = 2 * Math.PI * frequency * period / canvas.width
function getPixel(frequency) {
  return getOmega(frequency) * period / (cx.value/.5);
}

var sin_pixel = getPixel(sinFrequency);

function getWavePoints(count, pixel, triangle_func) {
  var points = []; //points array

  for (var i = 0, len = count; i < len; i++) {
    points.push(triangle_func(pixel * i) * factor + yPosition); //this moves the wavform along y axis, but it is an array 

  }

  return points;
}

// 下面是 x-pos 移动应该起作用的地方

 function drawPoints(pixel, triangle_func) {
      var path = getWavePoints(canvas.width, pixel, triangle_func);

  ctx.beginPath();
  ctx.moveTo(0, path[0]);

  for (var i = 0, len = path.length; i < len; i++) {
    ctx.lineTo(i, path[i]);
  }

  ctx.stroke();
}

    if (isDrawSin) {
      drawPoints(sin_pixel, function(x){return Math.sin(x);});
    }
  }

  function getFactor() { //the function adjusts the wave height (amplitude)
    return canvas.height / amp;  
  }

这样做时，我想左右移动整个波形，但不增加波形的频率。

Answer 1

您正在尝试做的是更改您的周期函数的phase。一般来说，周期函数是这样的：

y = amplitude * f(2 * pi * frequency + phase) + yoffset

... 其中f 是sin、cos 等。上下移动时，您更改yoffset，就像您使用yPosition 变量一样。可以通过更改phase 值来实现从左到右移动图形。