Question

我有这个画布水平制作。但我想要实现的是垂直波。我试图将值从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;

}

这是水平波。 jsFiddle

谢谢

Answer 1

您可以使用转换将画布旋转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);
}

画布垂直波

1 个答案: