JS结合Canvas画运动小球

想了解更多内容，请访问：

创新互联公司是专业的和静网站建设公司，和静接单;提供成都做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行和静网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

和华为官方合作共建的鸿蒙技术社区

https://ost.

前言

canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球。

实现思路

首先为了达到我们想要的效果,可以先创建一个构造函数。
给构造函数添加对应的属性和方法。
实例化出多个对象,并且保存在数组中。
遍历每个对象,实现画圆。
间隔修改每个球的x,y值。

先准备画布确定对应的宽高:

因为是随机运动,所以要创建一个获取随机数的方法:

function getRandomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return Math.round(Math.random() * minNum + minNum);
            break;
        case 2:
            return Math.round(
                Math.random() * (maxNum - minNum) + minNum);
            break;
        case 0:
            return 0;
            break;
    }
}
// 创建一个Ball的构造函数
    function Ball(maxWidth, maxHeight, ctx) {
        this.ctx = ctx;
        this.maxWidth = maxWidth;
        this.maxHeight = maxHeight;
        // 随机半径
        this.r = getRandomNum(5, 15);
        // 随机x,y坐标
        this.x = getRandomNum(this.r, this.maxWidth - this.r);
        this.y = getRandomNum(this.r, this.maxHeight - this.r);
        // 平移速度,正负区间是为了移动方向多样
        this.speedX = getRandomNum(-2, 2);
        this.speedY = getRandomNum(-2, 2);
        // 颜色随机
        this.color = `rgba(${getRandomNum(0, 255)},
        ${getRandomNum(0, 255)},
        ${getRandomNum(0, 255)},${Math.random()})`;
    }
    Ball.prototype = {
        draw: function () {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        },
        move: function () {
            // 判断边界值,让圆球始终保证在画面内
            if (this.x > this.maxWidth - this.r || this.x < this.r) {
                this.speedX = -this.speedX;
            }
            if (this.y > this.maxHeight - this.r || this.y < this.r) {
                this.speedY = -this.speedY;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }
    };
    // 创建100个Ball实例
    let balls = [];
    for (let i = 0; i < 100; i++) {
        let newBall = new Ball(maxWidth, maxHeight, ctx);
        newBall.draw();
        balls.push(newBall);
    }

静态效果

现在我们画出了不同半径和颜色的静止圆球。

调用move方法,间隔修改每个球的x,y值。

setInterval(() => {
    // 每次画之前都要清除画布
    ctx.clearRect(0, 0, maxWidth, maxHeight);
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, maxWidth, maxHeight);
    for (let j = 0; j < 100; j++) {
        balls[j].draw(ctx);
        balls[j].move();
    }
}, 100);

效果展示。

总结

canvas强大的绘图能力可以使网页的内容更加丰富多彩,给用户带来更好的视觉效果和和交互体验,掌握一些功能的使用可以让我们的项目更好的理解与canvas相关的框架使用,也能够创建丰富的web应用,同时也要求我们更好的掌握javascript。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://ost.

网站名称：JS结合Canvas画运动小球
浏览路径：http://www.shufengxianlan.com/qtweb/news28/540628.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容