javascript - 根据我在代码中输入的圆柱体高度和变量值上下动画 Canvas

Question

根据变量值上下动画 Canvas (线)。

这里我添加了变量名位置。默认我的行将在圆柱体的底部。当我输入 20 的值时，它向上移动，反之亦然，如果我输入 15 的值，它必须像 0 - 100 那样下降。所以我尝试的是在新函数调用中创建一个变量

function animatecurve()
{
    var position = 0;
    alert("position " + position);
    var bottomcylin = $('#canvas').position().top + $('#canvas').outerHeight(true);
    alert("cylinder bottom" + bottomcylin);
    if (position1 > 0) {
    alert("inside position" +  position1);
    $('#myCanvas').animate({top:"-=10px",}, 300);
} else {
    $('#myCanvas').animate({top:"0px",}, 300);
}
}

在这里我找到了圆柱体的外部高度。如果我在我的曲线必须向圆柱体顶部移动的位置输入值 30，它不应超出圆柱体。

Fiddle link

请指导我。

问候中号

Answer 1

看看http://jsfiddle.net/BG6p2/ , 也许这就是你要找的

HTML

<canvas id="canvas" width="300" height="500"></canvas>
<input type="text" id="level" placeholder="type value here %" />

Javascript

var canvas = document.getElementById('canvas'),
    ctx    = canvas.getContext('2d'),
    input  = document.getElementById('level');

//helpers
ctx.drawEllipse = function(x, y, radius, color, colorBorder){
    this.fillStyle   = '#000';
    this.strokeStyle = '#000';

    this.save();

    this.scale(2, 1);

    this.beginPath();

    this.arc(x, y, radius, 0, 2 * Math.PI, false);

    this.restore();

    this.closePath();

    if(color) {
        this.fillStyle = color;
        this.fill();

        if(colorBorder) this.strokeStyle = color;
    }

    this.stroke();
}

ctx.drawLine = function(startX, startY, endX, endY, color){
    if(color) this.strokeStyle = color;

    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
};

/**
* @params
* @param x                    - top left x coordinate
* @param y                    - top left y coordinate
* @param radius               - ellipsis radius
* @param height               - cylinder height
* @param liquidColor          - inner liquid color
* @param liquidSunnySideColor - liquid surface color
* @param liquidLevel          - liquid level
**/
ctx.drawCylinder = function(x, y, radius, height, liquidColor, liquidSunnySideColor,liquidLevel){
    //do not spill
    liquidLevel = Math.min(height, liquidLevel);

    //draw liquid inner body
    ctx.fillStyle = liquidColor;
    ctx.fillRect(x, y + (height - liquidLevel), x + radius * 4, liquidLevel);
    //console.log(x, y);

    //bottom cap
    ctx.drawEllipse(x, y + height, radius, liquidLevel ? liquidColor : false);

    //liquid level
    ctx.drawEllipse(x, y + (height - liquidLevel), radius, liquidLevel ? liquidSunnySideColor : false, true);

    ctx.drawEllipse(x, y + height, radius);

    //top cap
    ctx.drawEllipse(x, y, radius);

    //left border
    ctx.drawLine(x, y, x, y + height, '#000');

    //right border
    ctx.drawLine(x + radius * 4, y, x + radius * 4, y + height, '#000');
}

var renderLoop = window.webkitRequestAnimationFrame,
    //workers
    _fps          = 60,
    _speed        = 1,
    _currentLevel = 0,
    _maxLevel     = 0,
    _renderTime   = 0,
    _render,
    time,

    //cylinder
    x      = 100,
    y      = 100,
    radius = 50,
    height = 200;

_render = function(){
    time = window.performance.now();

    if(time - _renderTime > 1000 / _fps){
        ctx.clearRect(0, 0, 300, 500);

        //only positive values
        _currentLevel = Math.max(0, _currentLevel);

        if(_currentLevel > _maxLevel) _currentLevel -= _speed;
        if(_currentLevel < _maxLevel) _currentLevel += _speed;

        ctx.drawCylinder(x, y, radius, height, '#90C94D', '#BBED80', _currentLevel);

        _renderTime = time;
    }

    renderLoop(_render);
}

_render();

input.addEventListener('blur', function(){
    //only positive values
    _maxLevel = Math.max(0, height * Math.min(1, this.value / 100));
});