第一次登录进去博客园&＃xff0c;发现它在鼠标点击页面的时候会出现炫彩小球&＃xff0c;感觉挺好玩的&＃xff0c;学了canvas就来做啦&＃xff01;
效果展示
实现思路
- 首先以小球为对象&＃xff0c;创建一个构造函数
在这里存放小球需要的数据(x,y,r,color等)
function Ball(x, y, r) {
this.x &＃61; x;
this.y &＃61; y;
this.r &＃61; r;
this.color &＃61; getRandom();
this.dx &＃61; parseInt(Math.random() * 10);
this.dy &＃61; parseInt(Math.random() * 10);
ballArr.push(this);
}
function getRandom() {
var allType &＃61; [&＃39;0&＃39;, &＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;, &＃39;4&＃39;, &＃39;5&＃39;, &＃39;6&＃39;, &＃39;7&＃39;, &＃39;8&＃39;, &＃39;9&＃39;, &＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;, &＃39;d&＃39;, &＃39;e&＃39;, &＃39;f&＃39;];
var color &＃61; &＃39;#&＃39;;
for (let i &＃61; 0; i < 6; i&＃43;&＃43;) {
var random &＃61; parseInt(Math.random() * allType.length);
color &＃43;&＃61; allType[random];
}
return color;
}
- 给原型添加渲染小球的方法
Ball.prototype.render &＃61; function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.fillStyle &＃61; this.color;
ctx.fill();
}
- 给原型添加更新的方法&＃xff0c;让小球动起来
随机改变小球的位置&＃xff0c;减小小球的半径&＃xff0c;当小球的半径为0时清除小球
Ball.prototype.update &＃61; function () {
this.x &＃43;&＃61; this.dx;
this.y &＃43;&＃61; this.dy;
this.r -&＃61; 0.7;
if (this.r < 0) {
this.remove();
}
}
- 把小球渲染函数好啦&＃xff0c;接下来写渲染爱心的函数&＃xff0c;这里用到了
drawImage&＃xff0c;通过这个函数&＃xff0c;传入x和y的值&＃xff0c;就把爱心渲染出来啦&＃xff01;
var img &＃61; new Image();
img.src &＃61; &＃39;../img/爱心 (1).png&＃39;;
function paintHeart(x, y) {
dx &＃61; parseInt(Math.random() * 10);
dy &＃61; parseInt(Math.random() * 20);
x &＃61; x - 10;
y &＃61; y - 12;
ctx.drawImage(img, x, y, 12, 12);
}
- 最后就是在点击事件中应用这些方法
这里要注意的就是&＃xff0c;在小球更新位置的时候&＃xff0c;爱心也要更新位置&＃xff0c;但是跟小球是不同步的&＃xff0c;因此在清空画布之后要再次渲染爱心&＃xff0c;并且在小球都清除之后要清除定时器还有画布&＃xff0c;最后一步清除画布目的是清除爱心。
(如果看不懂这句话的话&＃xff0c;可以尝试一下不清除定时器)
canvas.onmousedown &＃61; function () {
x &＃61; event.offsetX;
y &＃61; 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 &＃61; setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (x > 0) {
x &＃61; x - 1;
}
if (y > 0) {
y &＃61; y - 1;
}
paintHeart(x, y);
for (let i &＃61; 0; i < ballArr.length; i&＃43;&＃43;) {
ballArr[i].update();
if (ballArr[i]) {
ballArr[i].render();
}
}
}, 100)
setTimeout(() &＃61;> {
ctx.clearRect(0, 0, canvas.width, canvas.height);
clearInterval(timer);
}, 600);
}
源码
html&＃43;css&＃43;js
<!DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Document</title>
<style>
body {
background-color: rgb(61, 58, 58);
}
</style>
</head>
<body>
<canvas id&＃61;"canvas" width&＃61;"1000" height&＃61;"1000"></canvas>
<script>
var canvas &＃61; document.getElementById(&＃39;canvas&＃39;);
var ctx &＃61; canvas.getContext(&＃39;2d&＃39;);
var img &＃61; new Image();
img.src &＃61; &＃39;../img/爱心 (1).png&＃39;;
var x &＃61; 0;
var y &＃61; 0;
var ballArr &＃61; [];
function paintHeart(x, y) {
dx &＃61; parseInt(Math.random() * 10);
dy &＃61; parseInt(Math.random() * 20);
x &＃61; x - 10;
y &＃61; y - 12;
ctx.drawImage(img, x, y, 12, 12);
}
function Ball(x, y, r) {
this.x &＃61; x;
this.y &＃61; y;
this.r &＃61; r;
this.color &＃61; getRandom();
this.dx &＃61; parseInt(Math.random() * 10);
this.dy &＃61; parseInt(Math.random() * 10);
ballArr.push(this);
}
Ball.prototype.update &＃61; function () {
this.x &＃43;&＃61; this.dx;
this.y &＃43;&＃61; this.dy;
this.r -&＃61; 0.7;
if (this.r < 0) {
this.remove();
}
}
Ball.prototype.remove &＃61; function () {
for (let i &＃61; 0; i < ballArr.length; i&＃43;&＃43;) {
if (ballArr[i] &＃61;&＃61;&＃61; this) {
ballArr.splice(i, 1);
}
}
}
Ball.prototype.render &＃61; function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.fillStyle &＃61; this.color;
ctx.fill();
}
canvas.onmousedown &＃61; function () {
x &＃61; event.offsetX;
y &＃61; 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 &＃61; setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (x > 0) {
x &＃61; x - 1;
}
if (y > 0) {
y &＃61; y - 1;
}
paintHeart(x, y);
for (let i &＃61; 0; i < ballArr.length; i&＃43;&＃43;) {
ballArr[i].update();
if (ballArr[i]) {
ballArr[i].render();
}
}
}, 100)
setTimeout(() &＃61;> {
ctx.clearRect(0, 0, canvas.width, canvas.height);
clearInterval(timer);
}, 600);
}
function getRandom() {
var allType &＃61; [&＃39;0&＃39;, &＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;, &＃39;4&＃39;, &＃39;5&＃39;, &＃39;6&＃39;, &＃39;7&＃39;, &＃39;8&＃39;, &＃39;9&＃39;, &＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;, &＃39;d&＃39;, &＃39;e&＃39;, &＃39;f&＃39;];
var color &＃61; &＃39;#&＃39;;
for (let i &＃61; 0; i < 6; i&＃43;&＃43;) {
var random &＃61; parseInt(Math.random() * allType.length);
color &＃43;&＃61; allType[random];
}
return color;
}
</script>
</body>
</html>
京公网安备 11010802041100号