Canvas<基础学习_01(绘制小球)>
2020-03-03 本文已影响0人
誰在花里胡哨
效果图：
canvas_1.gif
废话不多说，代码备注已经很详细了
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
background: #dbdbdb;
color: #1aa196;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
let w = window.innerWidth;
let h = window.innerHeight;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let ballArray = []
let colorArray = ["#1ec9ba", "#2febdb", "#53f0e3", "#b3f3ee", "#1aa196"]
canvas.width = w;
canvas.height = h;
document.addEventListener("mousedown", function (e) {
init(e.clientX, e.clientY)
})
// 随机生成一个 lower ~ upper 的数
function randomIntFronRange(lower, upper) {
return Math.random() * (upper - lower) + lower;
};
//创建小球的方法(相关样式，起始坐标位置等)
function init(b_x, b_y) {
let x = b_x;
let y = b_y;
let cX = randomIntFronRange(-5, 5);
let cY = randomIntFronRange(-5, 5);
let radius = 10;
let color = colorArray[Math.floor(Math.random() * colorArray.length)];
ballArray.push(new createBall(x, y, cX, cY, radius, color))
}
//根据鼠标点击创建一个小球的对应对象属性
function createBall(x, y, cX, cY, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
//x,y轴偏移量
this.cX = cX;
this.cY = cY;
//绘制一个圆球，并填充颜色
this.draw = function () {
ctx.beginPath();
// 定义绘制圆点的背景色
ctx.fillStyle = color;
// 定义边框颜色
// ctx.strokeStyle = 'white'
// 定义边框宽度
// ctx.lineWidth = 0.2;
// // 阴影
// ctx.shadowOffsetX = 15; // 阴影Y轴偏移
// ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = color;
//绘制圆点的坐标，圆的半径，圆心位置，圆(Math.PI * 2为圆形，否则为扇形)
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
//实时更新动画
this.update = function () {
// 临界值判断 ，超出临界值时偏移量取反
if (this.y + this.radius > h || this.y - this.radius <= 0) {
this.cY = -this.cY;
}
if (this.x + this.radius > w || this.x - this.radius <= 0) {
this.cX = -this.cX;
}
this.x += this.cX;
this.y += this.cY;
this.draw()
}
}
//创建小球的移动
function moveBall() {
window.requestAnimationFrame(moveBall)
//清除每个小球的运动痕迹
ctx.clearRect(0, 0, w, h);
for (const n of ballArray) {
n.update()
}
}
moveBall()
</script>
</html>
