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

Posted MaNqo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas炫彩小球爱心(博客园鼠标点击)相关的知识,希望对你有一定的参考价值。

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

效果展示

在这里插入图片描述

实现思路

  1. 首先以小球为对象,创建一个构造函数
    在这里存放小球需要的数据(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;
        }

  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();
        }
  1. 给原型添加更新的方法,让小球动起来
    随机改变小球的位置,减小小球的半径,当小球的半径为0时清除小球
Ball.prototype.update = function () {
            // 小球的运动
            this.x += this.dx;
            this.y += this.dy;
            this.r -= 0.7;
            // 如果小球半径小于0,从数组中删除
            if (this.r < 0) {
                this.remove();
            }
        }
  1. 把小球渲染函数好啦,接下来写渲染爱心的函数,这里用到了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);
        }
  1. 最后就是在点击事件中应用这些方法
    这里要注意的就是,在小球更新位置的时候,爱心也要更新位置,但是跟小球是不同步的,因此在清空画布之后要再次渲染爱心,并且在小球都清除之后要清除定时器还有画布,最后一步清除画布目的是清除爱心。
    (如果看不懂这句话的话,可以尝试一下不清除定时器)
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>

以上是关于canvas炫彩小球爱心(博客园鼠标点击)的主要内容,如果未能解决你的问题,请参考以下文章

随鼠标动的炫彩小球

炫彩小球案例

炫彩小球案例

炫彩字and鼠标爱心

超多经典 canvas 实例,动态离子背景移动炫彩小球贪吃蛇坦克大战是男人就下100层心形文字等等等

被玩坏的博客园之canvas装饰博客园侧边栏