「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」
1, 统计图制作
统计图在实际的项目开发过程中经常会用到，比如下面的案例图：
<!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>圆形统计图</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
var w = context.canvas.width;
var h = context.canvas.height;
context.font = "50px Microsoft YaHei";
context.textAlign = "center"; //水平对齐方式
context.textBaseline = "middle"; //垂直对齐方式
context.fillText('97%', w / 2, h / 2, 30)
var deg = Math.PI * 2 / 360;
var count = 1
var timer = setInterval(function() {
count++;
context.beginPath();
// context.arc(250, 250, 200, 0, count * deg, false);
context.arc(250, 250, 200, -Math.PI/2, count * deg - Math.PI / 2, false);
context.lineWidth = 5;
context.strokeStyle = '#f00';
context.stroke();
if (count === 270) {
clearInterval(timer)
}
})
</script>
</html>
效果图如下：
2, 小球碰撞检测
小球碰撞检测主要在游戏开发中比较场景
<!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>碰撞检测</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
const canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
const context = canvas.getContext('2d')
let w = context.canvas.width;
let h = context.canvas.height;
// 画一个小球
let x = 100;
let y = 100;
let r = 20;
// 水平速度
let xSpeed = 2;
// 垂直速度
let ySpeed = 3;
setInterval(function() {
context.clearRect(0, 0, w, h)
// 在小球碰到边缘的时候，速度取反即可
if (x -r <=0 || x + r >= w) {
xSpeed = -xSpeed;
}
x = x + xSpeed; // 水平运动
if (y -r <=0 || y + r >= h) {
ySpeed = -ySpeed
}
y = y + ySpeed
drawCircle(x, y, r)
}, 10)
// 封装小球
function drawCircle(x, y, r) {
context.beginPath();
context.arc(x, y, r, 0 , Math.PI * 2)
context.fillStyle = 'gold'
context.fill()
context.stroke()
}
</script>
</html>
效果如图：
3, 面向对象小球
首先通过对象构建一个小球，并在其原型上添加两个方法，一个用来显示的show()，一个用来运动的run(),
详细代码如下：
<!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>面向对象小球</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
const canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
const context = canvas.getContext('2d')
let w = context.canvas.width;
let h = context.canvas.height;
// 面向对象
function Ball(x, y, r, color, xSpeed, ySpeed) {
function r(num) {
return Math.random() * num;
}
this.x = r(5) + 60
this.y = r(3) + 60
this.r = r(50) + 10 // [10-60]
this.color = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16);
this.xSpeed = r(3) + 2;
this.ySpeed = r(3) + 1
}
// 定义小球显示方法
Ball.prototype.show = function() {
// 更新坐标，显示小球
this.run()
context.beginPath();
context.arc(this.x, this.y, this.r, 0 , Math.PI * 2)
context.fillStyle = this.color;
context.fill()
}
// 定义小球运动方法
Ball.prototype.run = function() {
if (this.x - this.r <=0 || this.x + this.r >= w) {
this.xSpeed = -this.xSpeed;
}
this.x = this.x + this.xSpeed; // 水平运动
if (this.y - this.r <=0 || this.y + this.r >= h) {
this.ySpeed = -this.ySpeed
}
this.y = this.y + this.ySpeed
}
var ballArr = [];
for(var i = 0; i< 20; i++) {
const ball = new Ball()
ballArr.push(ball)
ball.show()
}
setInterval(function() {
context.clearRect(0, 0, w, h)
for(var i = 0; i< ballArr.length; i++) {
var ball = ballArr[i];
ball.show()
}
}, 20)
// 封装小球
</script>
</html>
效果如图：
4, 项目源码
项目代码地址和文档中的截图都是同步的，都已经实现， 在canvas文件夹中
[持续更新中]
