Javascript 绘制HTML5画布脉冲线_Javascript_Html_Canvas_Html5 Canvas

Javascript 绘制HTML5画布脉冲线

javascript html canvas html5-canvas

Javascript 绘制HTML5画布脉冲线,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,嘿，伙计们，我一直在尝试用HTML5画布动画来包装我的头，但不幸的是失败了，我想通过在10秒钟的时间间隔内制作这个自定义形状的动画来实现下图我几乎搞砸了它的数学运算，所以我最终只是手动编写每个lineTo语句，最后尝试Paul Irish的requestAnimationFrame来设置行的动画，但没有成功如果您有任何帮助，我们将不胜感激谢谢各位您基本上需要一个只返回两个值的函数——高和低以下是一个函数，它根据周期和振荡值仅返回低/高值： // squared wave // p

嘿，伙计们，我一直在尝试用HTML5画布动画来包装我的头，但不幸的是失败了，我想通过在10秒钟的时间间隔内制作这个自定义形状的动画来实现下图

我几乎搞砸了它的数学运算，所以我最终只是手动编写每个lineTo语句，最后尝试Paul Irish的requestAnimationFrame来设置行的动画，但没有成功

如果您有任何帮助，我们将不胜感激


谢谢各位
您基本上需要一个只返回两个值的函数——高和低
以下是一个函数，它根据周期和振荡值仅返回低/高值：
// 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 );
}

//平方波
//p=周期（波浪完全完成并开始新周期所需的时间）
//o=振荡（波高变化）
函数平方（x）{
回报率（（x%p）300）{
n=0；
}
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
对于（var x=0；x它没有移动，因为基本上没有移动任何东西-每次迭代都会将相同的形状绘制到相同的位置
这是一个修改过的版本，它将脉冲设置为向左的动画（调整dlt
以更改速度）：
var segX=canvas.width/6；
var segY=canvas.height/2；
函数绘图（）{
ctx.clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（0，segY）；
对于（var i=dlt，h=true；i
你可以用替换你所有的lineTo代码（x=1；x感谢@Jugale，这会很有帮助，你知道为什么动画不起作用吗？我不明白你想做什么动画-你想在一个间隔后分别绘制每条线吗？draw（）
肯定在每个间隔都会被调用（添加了一个警报来测试这一点）-你说不出来是因为每次调用它时你都没有改变任何值：你只是再次绘制相同的形状是的，这正是我想要实现的。这很好，但我想要的是有点不同，如果你知道我的意思的话，我想为每一条线的实际绘制设置动画。我还注意到，当我调用Function时在速度再次增加时，我打算在一个按钮点击事件中使用它，当点击时，绘图将清除舞台并开始进行过多的渲染，这正是我想要的，除了我调用动画函数onclick事件外，每次调用它时，动画速度都会增加一倍，而不是仅仅重新绘制，我也不知道完成后如何停止动画n确定动画在x轴上向右移动的距离。因此，如果您希望动画在n>300时停止，只需将requestAnimationFrame（animate）替换为if（if），这是一个如何停止、恢复和重新启动动画的难题：祝您的项目好运！
<!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>

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);
}