OtonashiNatsumi 2021-07-08 11:25 采纳率: 100%
浏览 30
已采纳

js如何做到点击按钮出现随机圆形并且向右下掉落？

试着写了如下的代码，但是这样就会让圆形疯狂出现，位置好像也没有在移动的样子
应该怎么改比较好呢？
隐约觉得是不是可以用合集达成呀

<body>
    <canvas width="640" height="480" id="b"></canvas>
    <br><button id="a">画圆</button>

    <script>
let c={r:40};
let id=null;
const cv=document.querySelector("canvas");
const gc=cv.getContext("2d");
const a=document.querySelector("#a");
a.addEventListener("click",()=>{
draw();
})
function draw(){
c.x+=1;
c.y+=1;
id=setInterval(draw,10);
gc.beginPath();
gc.lineWidth=5;
gc.strokeStyle="blue";
gc.arc(x=parseInt(Math.random()*640),y=parseInt(Math.random()*480),c.r,0,2*Math.PI);
gc.stroke();
}
    </script>
</body>
  • 写回答

2条回答 默认 最新

  • 黑白猫妈 2021-07-08 16:04
    关注

    运用canvas画布实现的话，需要在圆移动过程中不断的清空画布，所以要整体添加一个定时器，定期清空画布，清空后再把每个圆新的位置画出来，达到移动的效果，实现如下：

    <body>
    <canvas width="640" height="480" id="b"></canvas>
    <br><button id="a">画圆</button>

    <script>
        let c = { r: 10,x:10,y:10 };
        let id = null;
        const cv = document.querySelector("canvas");
        const gc = cv.getContext("2d");
        const a = document.querySelector("#a");
        let circleArr = [];
        a.addEventListener("click", () => {
            // draw(10,10);
            console.log(circleArr);
            circleArr.push({
                x:Math.random()*640,
                y:Math.random()*480,
            })
        })
        id = setInterval(() => {
            gc.clearRect(0,0,640,480);
            let newArr = [];
            for(var i = 0;i < circleArr.length;i++){
                if(circleArr[i].x < 640){
                    circleArr[i].x += 1;
                    circleArr[i].y += 1;
                    newArr.push(circleArr[i]);
                    draw(circleArr[i].x, circleArr[i].y);
                }
            }
            circleArr = newArr;
        }, 10);
        function draw(x, y) {
            x += 1;
            y += 1;
            gc.beginPath();
            gc.lineWidth = 5;
            gc.strokeStyle = "blue";
            gc.arc(x, y, c.r, 0, 2 * Math.PI);
            gc.stroke();
        }
    </script>
</body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面，是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号