Холст Вертикальная волна

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