帆布垂直波

我有这个帆布在水平。但我想要的是一个垂直波。我试图将值从x更改为y，但不幸的是，这没有奏效。帆布垂直波

第一件事，我想垂直。之后，我想要制作一个这样的方形。但一次只能一步。

在本地我垂直创建了这个wave，但是从这个函数的鼠标移动不起作用。

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

谢谢

来源

2016-09-23 Nistor Cristian

_“我试图从X到Y可惜没有奏效更改数值” _ - 宽度/高度怎么样？例如，在上面的代码片段中，你有'Math.abs（_halfStageHeight - mouseY）' - 也许可以切换出来（也可能出现其他情况）。 – CBroe

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

来源

2016-09-23 16:23:36 markE

回答

相关问题