2021-06-28学习canvas简单的做一个吃豆人

最新推荐文章于 2021-10-08 19:10:26 发布

aflylong

最新推荐文章于 2021-10-08 19:10:26 发布

阅读量309

点赞数 2

分类专栏： canvas 文章标签： html5

本文链接：https://blog.csdn.net/aflylong/article/details/118309410

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用canvas画出一个简单的吃豆人
首先先创建一个画布

 <canvas id="cavs" width="1900" height="900"></canvas>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="cavs" width="1900" height="900"></canvas>
    <script>
        var canvas = document.getElementById('cavs');//获取元素
        var ctx = canvas.getContext('2d');
        var deg = 7;//设置初始黄豆人嘴巴的角度
        var ctop = 200;//设置黄豆人初始圆心位置
        var speed = 0.1;//设置黄豆人嘴巴的闭合张开速度
        var five = 6;//设置豆子的个数
        var num = null;//存储豆子出现的位置
        setInterval(function () {
            ctx.clearRect(0, 0, 1900, 900);
            //clearRect清除整个画布
            for (var i = 1; i <= five; i++) {
                //根据豆子个数进行渲染
                ctx.beginPath();
                //开启一条新的路径
                ctx.fillStyle = 'red';
                //设置豆子填充颜色
                num = i * 300;
                //记录豆子渲染的位置
                if (ctop + 150 >= num - 50) {
                    //ctop为圆心，150为半径，判断小黄球是否触碰到豆子
                    //如果碰到跳过不渲染这个豆子
                    continue
                } else {
                    //否则根据位置，使用arc渲染一个圆形豆子
                    ctx.arc(num, 170, 50, 0, Math.PI * 2, 0);
                    ctx.closePath();
                    //闭合路径
                    ctx.fill();
                    //给豆子进行填充
                }
            }
            ctx.beginPath();
            ctx.fillStyle = 'yellow';
            // 设置小黄球的填充颜色
            ctx.arc(ctop, 200, 150, (Math.PI / 4) * (8 - deg), (Math.PI / 4) * deg, 0);            //根据ctop渲染小黄球的样子，嘴巴是重复进行张开闭合的
            ctx.lineTo(ctop, 200);
            //设置闭合
            ctx.closePath();
            ctx.fill();
            //进行填充
            ctx.beginPath();
            //开启一个新的路径
            ctx.arc(ctop - 30, 130, 25, 0, Math.PI * 2, 0);
            //渲染出一个圆形眼睛
            ctx.fillStyle = 'white';
            //填充为白色
            ctx.fill();
            ctx.closePath();
            if (deg >= 8) {
                // 判断嘴巴是否关闭，改变speed为负值，变成张嘴
                speed = -speed;
            }
            if (deg < 7) {
                // 判断嘴巴是否变成张开到最大值，改变speed为正值，变成闭嘴
                speed = -speed;
            }
            //判断小黄球是否到达画布的最右边，重置小黄球的位置
            if (ctop >= 1900) {
                ctop = -150;
            }
            ctop += 10;
            deg += speed;
        }, 100)

    </script>
</body>

</html>