canvas炫彩小球爱心(博客园鼠标点击)
第一次登录进去博客园，发现它在鼠标点击页面的时候会出现炫彩小球，感觉挺好玩的，学了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>