index.html

<div style="height:200">
</div>

<div style="width:200; margin:20 auto">
    <canvas style="border:0px" id="myCanvas" width="200" height="100">
    </canvas>
</div>

<div style="margin:20px auto; text-align:center" >
I'm lamdba. This is my personal page.<br>
This is my gitee: <a href="https://gitee.com/lamdba">https://gitee.com/lamdba</a><br>
This is my github: <a href="https://github.com/lamdba">https://github.com/lamdba</a>
</div>


<script>
    var ctx = document.getElementById("myCanvas").getContext("2d");
    var img = new Image(); img.src = "seeright.png";
    var n = 0;  <!-- 20 等分一个直角-->
    var A = 40;
    var DTH = Math.PI/2/A
    var ALPHA = Math.PI/4;
    var th1 = -3*ALPHA;
    var th2 = -1*ALPHA;
    var th3 = 1*ALPHA;
    var x,y;
    function f()
    {
        ctx.clearRect(0,0,200,200);

        x = 100+70.7*Math.sin(th1);y = 100+70.7*Math.sin(th2);
        ctx.drawImage(img,x, 0, y-x, 100);

        x = y;y = 100+70.7*Math.sin(th3);
        ctx.drawImage(img, x, 0, y-x, 100);

        th1 += DTH;
        th2 += DTH;
        th3 += DTH;
        n += 1
        if (n == A)
        {
            n = 0;
            th1 = -3*ALPHA;
            th2 = -1*ALPHA;
            th3 = 1*ALPHA;
        }
        setTimeout(function(){eval("f()")},30);
    }
    f();

</script>