キャンバス垂直ウェーブ

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

はあなたが垂直にキャンバスを90度回転させるように変換を使用することができ、あなたに

Answer 1

ありがとう：

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