根据变量值上下动画 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,它不应超出圆柱体。
请指导我。
问候 中号
最佳答案
看看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));
});
关于javascript - 根据我在代码中输入的圆柱体高度和变量值上下动画 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24952450/