技术大佬前端技术分享 2020-08-26

canvas实现吃豆人效果

下面是预览图:

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
    var mycanvas=document.getElementsByTagName("canvas")[0];
    var ctx=mycanvas.getContext("2d");

    var flag=true;

    draw(false);


    setInterval(function () {
        if(flag){
            draw(flag)
            flag=false;
        }else{
            draw(flag);
            flag=true;
        }

    },200)


//    画小人的方法
    function draw(flag){
        ctx.clearRect(0,0,500,500);
        ctx.beginPath();
        ctx.arc(280,150,30,0,2*Math.PI);
        ctx.fillStyle="#e4393c";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(250,250);
        if(flag){
            ctx.arc(250,250,200,-Math.PI/180*30,Math.PI/180*30,true);

        }else{
            ctx.arc(250,250,200,0,Math.PI*2,true);
        }
        ctx.closePath()
        ctx.stroke();

    }




</script>

</body>
</html>