Javascript 帆布垂直波

我把这块画布做成了水平的。但我想得到的是一个垂直波。我试图将值从x改为y，但不幸的是，这不起作用

function onMouseMove(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  var xPart;
  if(Math.abs(_halfStageHeight - mouseY) < _colRadius) {
    if(_allowHitBool){
        _mouseYSpeed = mouseY - _oldMouseY;
        xPart = Math.floor(mouseX/_particleDistNum);
        _particleArray[xPart].yVel = _mouseYSpeed/2;
      _allowHitBool = false;
      setTimeout(function() {
        _allowHitBool = true;
      }, 100);
    }
  }

  _oldMouseX = mouseX;
  _oldMouseY = mouseY;

}

第一件事我想让它垂直。在我完成后，我想做一个这样的正方形。但是一步一个脚印

在local上，我垂直地挥动了挥手，但是这个功能的鼠标移动不起作用

function onMouseMove(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  var xPart;
  if(Math.abs(_halfStageHeight - mouseY) < _colRadius) {
    if(_allowHitBool){
        _mouseYSpeed = mouseY - _oldMouseY;
        xPart = Math.floor(mouseX/_particleDistNum);
        _particleArray[xPart].yVel = _mouseYSpeed/2;
      _allowHitBool = false;
      setTimeout(function() {
        _allowHitBool = true;
      }, 100);
    }
  }

  _oldMouseX = mouseX;
  _oldMouseY = mouseY;

}

移动鼠标的函数（事件）{ var mouseX=event.clientX； var mouseY=event.clientY； var-xPart； if（数学abs（\u半级重量-鼠标）<\u colRadius）{ 如果（_allowitbool）{ _鼠标速度=鼠标-_oldMouseY； xPart=Math.floor（mouseX/_particleDistNum）； _particleArray[xPart].yVel=_mouseYSpeed/2； _Allowitbool=false； setTimeout（函数（）{ _Allowitbool=true； }, 100); } } _oldMouseX=mouseX； _oldMouseY=mouseY； } 这是水平波

---

谢谢

您可以使用变换将画布垂直旋转90度：

function init() {
  var stage = document.getElementById('stage');
 _stageWidth = stage.width = window.innerWidth;
  _stageHeight = stage.height = window.innerHeight;
  _halfStageHeight = _stageHeight/2;
  _stageContext = stage.getContext('2d');
    _stageContext.fillStyle = "#fff";
  _particleDistNum = _stageWidth/(_totalParticles-1);
  createParticles();

  // rotate the canvas 90 degrees to vertical
  _stageContext.translate(stage.width/2,stage.height/2);
  _stageContext.rotate(Math.PI/2);
  _stageContext.translate(-stage.width/2,-stage.height/2);
}

“我试图将值从x更改为y，但不幸的是，这不起作用”-宽度/高度如何？例如，在上面的代码片段中，您有

Math.abs（\u halfStageHeight-mouseY）

-也许也可以将其切换到另一个（以及其他可能出现的情况）