Question

嘿伙计们我一直试图围绕HTML5 Canvas动画，但是我很失败地想通过在10秒的间隔内设置这个自定义形状来实现下图。

我几乎搞砸了它的数学，所以我最后只是手动编写每个lineTo语句，最后尝试了Paul Irish的requestAnimationFrame动画线但没有运气。

任何帮助都将受到高度赞赏，这是 the live demo

谢谢你们

enter image description here

Answer 1

你基本上需要一个只返回2个值的函数 - 高和低。

这是一个根据周期和振荡值仅返回低/高值的函数：

// squared wave

// p = period (how long it takes the wave to fully complete and begin a new cycle)
// o = oscillation (change in wave height)

function squareY(x) {
    return( (x%p)<o?o:0 );
}

演示：http://jsfiddle.net/m1erickson/A69ZV/

enter image description here

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.lineWidth=3;

        var p=30;    // period
        var o=15;   // oscillation
        var fps = 60;
        var n=0;
        animate();
        function animate() {
            setTimeout(function() {
                requestAnimationFrame(animate);

                // Drawing code goes here
                n+=1.5;
                if(n>300){
                    n=0;
                }
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.beginPath();
                for(var x=0;x<n;x++){
                    var y=squareY(x);
                    ctx.lineTo(x,y+50);
                }
                ctx.stroke();        

            }, 1000 / fps);
        }

        // squared sine
        function squareY(x) {
            return( (x%p)<o?o:0 );
        }

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

Answer 2

它不会移动因为你基本上没有移动任何东西 - 每次迭代都会将相同的形状绘制到相同的位置。

这是一个修改过的版本，可以向左侧设置脉冲动画（调整dlt以改变速度）：

Modified fiddle here

var segX = canvas.width / 6;
var segY = canvas.height / 2;

function draw() {

    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.beginPath();

    ctx.moveTo(0, segY);

    for(var i = dlt, h = true; i < canvas.width + segX; i += segX) {
        if (h) {
            ctx.lineTo(i, segY);
            ctx.lineTo(i, segY + segX);
        } else {
            ctx.lineTo(i, segY + segX);
            ctx.lineTo(i, segY);
        }
        h = !h;
    }
    ctx.stroke();

    dlt--;
    if (dlt < -segX * 2) dlt = 0;

    requestAnimFrame(draw);
}

绘制HTML5画布脉冲线

2 个答案:

Modified fiddle here