第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

canvas————多球碰壁

標(biāo)簽:
JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #mycanvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="">
        <input type="button" id="buttn" value="开始" />
    </div>
    <canvas id="mycanvas" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
    var mycanvas = document.querySelector("#mycanvas");
    var ctx = mycanvas.getContext("2d");
    //随机函数
    function rand(a, b) {
        return parseInt(Math.random() * (b - a) + a + 1);
    }
    //构造函数 属性和方法
    function Circle() {
        this.radius = rand(0, 50);
        this.x = rand(this.radius, mycanvas.width - this.radius);
        this.y = rand(this.radius, mycanvas.height - this.radius);
        this.strokeStyle = "rgba(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 10) * 0.1 + ")";
        this.fillStyle = "rgba(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 10) * 0.1 + ")";
        this.movex = rand(0, 30) * 0.1 > 1 ? -rand(0, 30) * 0.1 : rand(0, 30) * 0.1; //三目运算
        this.movey = rand(0, 30) * 0.1 < 1 ? -rand(0, 30) * 0.1 : rand(0, 30) * 0.1;
        this.draw = drawCircle;
        this.move = move;
    }
    // 画圆
    function drawCircle() {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        ctx.strokeStyle = this.strokeStyle;
        ctx.fillStyle = this.fillStyle;
        //ctx.stroke();
        ctx.fill();
        ctx.restore();
    }
    //判断反弹
    function move() {
        if(this.x + this.movex - this.radius < 0 || this.x + this.movex + this.radius > mycanvas.width) {
            this.movex = -this.movex;
        }
        if(this.y + this.movey - this.radius < 0 || this.y + this.movey + this.radius > mycanvas.height) {
            this.movey = -this.movey;
        }
        this.x += this.movex;
        this.y += this.movey;
    }
    //获取按钮
    var buttn = document.querySelector("#buttn");
    var qq = [];
    //开关
    var onoff = false;
    //for循环多个圆
    for(i = 0; i < rand(10, 80); i++) {
        Circles = new Circle(); //new一个对象
        qq.push(Circles);
    }
    //绑定事件
    buttn.onclick = function() {
            onoff = !onoff;
            animation();
        }
        //canvas动画
    function animation() {
        ctx.clearRect(0, 0, 800, 600);
        for(i = 0; i < qq.length; i++) {
            qq[i].draw();
            qq[i].move();
        }
        if(onoff) {
            buttn.value = "开始";
            window.requestAnimationFrame(animation); //执行动画函数
        } else {
            buttn.value = "暂停";
        }
    }
</script>

</html>

點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消