绘制HTML5 Canvas脉冲线

Zyad Sherif 发表于 Dev

扎德·谢里夫（Zyad Sherif）

大家好，我一直想把头环绕在HTML5 Canvas动画上，但不幸的是，我想通过在10秒的间隔内对此自定义形状进行动画处理来实现下图。

我已经搞砸了它的数学原理，所以我最终只是手动编写了每个lineTo语句，最后尝试了Paul Irish的requestAnimationFrame为该行设置动画，但是没有运气。

任何帮助将不胜感激，这里是the现场演示

谢谢你们

在此处输入图片说明

牌

您基本上需要一个仅返回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/

在此处输入图片说明

示例代码：

<!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>