canvas炫彩小球爱心(博客园鼠标点击)

最新推荐文章于 2024-04-26 16:47:03 发布

MaNqo

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量979

点赞数 8

文章标签： canvas js javascript html css3

本文链接：https://blog.csdn.net/MaNqo/article/details/116550523

版权

第一次登录进去博客园，发现它在鼠标点击页面的时候会出现炫彩小球，感觉挺好玩的，学了canvas就来做啦！

效果展示

在这里插入图片描述

实现思路

首先以小球为对象，创建一个构造函数
在这里存放小球需要的数据(x,y,r,color等)

// 绘制小球
        function Ball(x, y, r) {
            this.x = x;  
            this.y = y;
            this.r = r;  // 初始半径
            this.color = getRandom();  // 获取随机颜色
            // 随机改变小球的移动路径
            this.dx = parseInt(Math.random() * 10);  
            this.dy = parseInt(Math.random() * 10);
            ballArr.push(this);  //ballArr存储渲染出来的小球的数组
        }
        // 把16进制存储到一个数组中，随机获取数组中的值
        function getRandom() {
            var allType = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
            var color = '#';
            for (let i = 0; i < 6; i++) {
                var random = parseInt(Math.random() * allType.length);
                color += allType[random];
            }
            return color;
        }

给原型添加渲染小球的方法

Ball.prototype.render = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        }

给原型添加更新的方法，让小球动起来
随机改变小球的位置，减小小球的半径，当小球的半径为0时清除小球

Ball.prototype.update = function () {
            // 小球的运动
            this.x += this.dx;
            this.y += this.dy;
            this.r -= 0.7;
            // 如果小球半径小于0，从数组中删除
            if (this.r < 0) {
                this.remove();
            }
        }

把小球渲染函数好啦，接下来写渲染爱心的函数，这里用到了drawImage，通过这个函数，传入x和y的值，就把爱心渲染出来啦！

var img = new Image();
img.src = '../img/爱心 (1).png';
function paintHeart(x, y) {
            dx = parseInt(Math.random() * 10);
            dy = parseInt(Math.random() * 20);
            x = x - 10;
            y = y - 12;
            ctx.drawImage(img, x, y, 12, 12);
        }

最后就是在点击事件中应用这些方法
这里要注意的就是，在小球更新位置的时候，爱心也要更新位置，但是跟小球是不同步的，因此在清空画布之后要再次渲染爱心，并且在小球都清除之后要清除定时器还有画布，最后一步清除画布目的是清除爱心。
(如果看不懂这句话的话，可以尝试一下不清除定时器)

canvas.onmousedown = function () {
            x = event.offsetX;
            y = event.offsetY;
            paintHeart(event.offsetX, event.offsetY);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);

            timer = setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                if (x > 0) {
                    x = x - 1;
                }
                if (y > 0) {
                    y = y - 1;
                }
                paintHeart(x, y);
                for (let i = 0; i < ballArr.length; i++) {
                    ballArr[i].update();
                    if (ballArr[i]) {
                        ballArr[i].render();
                    }
                }
            }, 100)
            setTimeout(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                clearInterval(timer);
            }, 600);

        }

源码

html+css+js

<!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>
    <style>
        body {
            background-color: rgb(61, 58, 58);
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');   // 相当于画笔
        var img = new Image();
        img.src = '../img/爱心 (1).png';
        var x = 0;
        var y = 0;
        var ballArr = [];
        // 绘制爱心
        function paintHeart(x, y) {
            dx = parseInt(Math.random() * 10);
            dy = parseInt(Math.random() * 20);
            x = x - 10;
            y = y - 12;
            ctx.drawImage(img, x, y, 12, 12);
        }
        // 绘制小球
        function Ball(x, y, r) {
            this.x = x;
            this.y = y;
            this.r = r;  // 初始半径
            this.color = getRandom();
            this.dx = parseInt(Math.random() * 10);
            this.dy = parseInt(Math.random() * 10);
            ballArr.push(this);
        }
        Ball.prototype.update = function () {
            // 小球的运动
            this.x += this.dx;
            this.y += this.dy;
            this.r -= 0.7;
            // 如果小球半径小于0，从数组中删除
            if (this.r < 0) {
                this.remove();
            }
        }

        Ball.prototype.remove = function () {
            for (let i = 0; i < ballArr.length; i++) {
                if (ballArr[i] === this) {
                    ballArr.splice(i, 1);
                }
            }
        }
        // 渲染小球
        Ball.prototype.render = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        }

        canvas.onmousedown = function () {
            x = event.offsetX;
            y = event.offsetY;
            paintHeart(event.offsetX, event.offsetY);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);
            new Ball(event.offsetX, event.offsetY, 6);

            timer = setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                if (x > 0) {
                    x = x - 1;
                }
                if (y > 0) {
                    y = y - 1;
                }
                paintHeart(x, y);
                for (let i = 0; i < ballArr.length; i++) {
                    ballArr[i].update();
                    if (ballArr[i]) {
                        ballArr[i].render();
                    }
                }
            }, 100)
            setTimeout(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                clearInterval(timer);
            }, 600);

        }



        function getRandom() {
            var allType = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
            var color = '#';
            for (let i = 0; i < 6; i++) {
                var random = parseInt(Math.random() * allType.length);
                color += allType[random];
            }
            return color;
        }


    </script>
</body>

</html>

如果对这类demo感兴趣的话，还可以参考一下下面这几篇博客~
UI设计高级感之视差滚动
 简易网页版贪吃蛇
 UI设计高级感之3D旋转

MaNqo

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
8
评论
canvas炫彩小球爱心(博客园鼠标点击)

第一次登录进去博客园，发现它在鼠标点击页面的时候会出现炫彩小球，感觉挺好玩的，学了canvas就来做啦！效果展示实现思路首先以小球为对象，创建一个构造函数在这里存放小球需要的数据(x,y,r,color等)// 绘制小球 function Ball(x, y, r) { this.x = x; this.y = y; this.r = r; // 初始半径 this.co.
复制链接

扫一扫