正文

轻松掌握JS面向对象，100个圆绘制实战教程，从小白到高手

/0 浏览量
0515

引言

JavaScript（简称JS）是一种广泛应用于网页开发的脚本语言。面向对象编程（OOP）是JS的核心特性之一。通过学习JS面向对象编程，你可以更高效地开发复杂的前端应用。本文将带你通过100个圆的绘制实战，从JS面向对象编程的小白一步步成长为高手。

第一部分：JS面向对象基础

1.1 对象的概念

在JS中，对象是一种无序的集合，它包含了多个键值对。每个键值对称为属性，属性值可以是基本数据类型或函数。

let person = {
  name: '张三',
  age: 25,
  sayHello: function() {
    console.log('你好，我是' + this.name);
  }
};

1.2 构造函数

构造函数用于创建具有相同属性和方法的多个对象。在JS中，构造函数通常以大写字母开头。

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.draw = function() {
  console.log('绘制半径为' + this.radius + '的圆');
};

1.3 类

ES6引入了类（Class）的概念，使得面向对象编程更加简洁易读。

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  draw() {
    console.log('绘制半径为' + this.radius + '的圆');
  }
}

第二部分：100个圆绘制实战

2.1 准备工作

  1. 创建一个HTML文件，并添加一个<canvas>元素。
  2. 在HTML文件中引入jQuery库，方便操作DOM。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>100个圆绘制实战</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>

2.2 绘制单个圆

  1. 在script.js文件中，创建一个Circle类。
  2. 在draw方法中，使用canvas的beginPath、arc和stroke方法绘制圆。
class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  draw() {
    const canvas = $('#canvas')[0];
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(this.radius, this.radius, this.radius, 0, 2 * Math.PI);
    ctx.stroke();
  }
}

2.3 绘制100个圆

  1. 创建一个drawCircles函数，用于绘制100个圆。
  2. 使用循环遍历半径从1到100的圆，并调用draw方法。
function drawCircles() {
  for (let i = 1; i <= 100; i++) {
    const circle = new Circle(i);
    circle.draw();
  }
}

drawCircles();

第三部分：进阶技巧

3.1 动画效果

  1. 使用requestAnimationFrame方法，为每个圆添加动画效果。
  2. 在draw方法中，使用clearRect方法清除画布，然后重新绘制圆。
class Circle {
  constructor(radius) {
    this.radius = radius;
    this.x = radius;
    this.y = radius;
    this.vx = 2;
    this.vy = 2;
  }

  draw() {
    const canvas = $('#canvas')[0];
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.stroke();
    this.x += this.vx;
    this.y += this.vy;
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.vx = -this.vx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.vy = -this.vy;
    }
  }
}

function animate() {
  for (let i = 1; i <= 100; i++) {
    const circle = new Circle(i);
    circle.draw();
  }
  requestAnimationFrame(animate);
}

animate();

3.2 随机颜色

  1. 在draw方法中，使用Math.random()方法生成随机颜色。
  2. 使用ctx.fillStyle属性设置填充颜色。
class Circle {
  constructor(radius) {
    this.radius = radius;
    this.x = radius;
    this.y = radius;
    this.vx = 2;
    this.vy = 2;
  }

  draw() {
    const canvas = $('#canvas')[0];
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fill();
    this.x += this.vx;
    this.y += this.vy;
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.vx = -this.vx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.vy = -this.vy;
    }
  }
}

animate();

结语

通过本文的学习，相信你已经掌握了JS面向对象编程的基础，并能够通过100个圆的绘制实战，将所学知识应用到实际项目中。继续努力，你将成长为一名优秀的JS开发者！

-- 展开阅读全文 --