Question

我正在尝试使用canvas在html5中绘制的两条线上添加一个正常的上下运动。但我无法.. 请建议我克服这个问题的方法，有没有更好的方法来做到这一点。我在这里添加功能

function create_blades()
{

canvas_context.moveTo(60+x_pos,80);
canvas_context.lineTo(125+x_pos,40+y_factor);
canvas_context.lineWidth = 3;
canvas_context.stroke();

canvas_context.moveTo(60+x_pos,110);
canvas_context.lineTo(125+x_pos,60-y_factor);
canvas_context.lineWidth = 3;
canvas_context.stroke();
//motion();

 }

Answer 1

您没有描述动作，因此这里是动画线（或任何对象）的通用方法。

更新职位
检查边界/标准
清除画布
重绘形状
循环

这是 live example 。

var xpos = 0,  // holds current position (here, actually delta to fixed pos)
    ypos = 0,
    dltY = 2,  // delta values
    dltX = 2;

(function loop() {

    xpos += dltX; // add delta values
    ypos += dltY;

    // check boundaries, here canvas edges
    if (xpos < 0 || xpos > canvas.width) dltX = -dltX;    
    if (ypos < 0 || ypos > canvas.height) dltY = -dltY;    

    // redraw graphics
    create_blades(xpos, ypos);

    // loop
    requestAnimationFrame(loop);
})();

然后绘制函数：

function create_blades(x_pos, y_factor) {

    // clear canvas
    canvas_context.clearRect(0, 0, canvas.width, canvas.height);

    canvas_context.beginPath(); // need this first

    canvas_context.moveTo(60 + x_pos, 80);
    canvas_context.lineTo(125 + x_pos, 40 + y_factor);
    //canvas_context.lineWidth = 3; // not needed here
    //canvas_context.stroke();

    canvas_context.moveTo(60 + x_pos, 110);
    canvas_context.lineTo(125 + x_pos, 60 - y_factor);
    canvas_context.lineWidth = 3;
    canvas_context.stroke();
    //motion();
}

当您在绘制位置使用固定值时，带位置的传递参数当然只会添加到该位置，但您应该能够看到移动形状的原理。

将动画添加到画布html5中的一行

1 个答案: