어떻게 ES6 의 클 라 스 클래스 계승 을 사용 하여 화려 한 작은 공 효 과 를 실현 합 니까?
이 효 과 는 Canvas 캔버스 로 그립 니 다.class 클래스 계승 을 이용 하여 구현 되 며,이 효 과 는 마우스 가 지정 한 Canvas 위치 에서 이동 하면 현재 마우스 위치 에서 무 작위 색상 의 작은 공 을 만 들 고,이후 작은 공 은 서서히 사라 집 니 다.
효과 도표
실현 절차
HTML 을 쓰다
캔버스 캔버스 환경 만 들 기
소 구 류 공 을 쓰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
#canvas{
margin-left: 100px
}
</style>
</head>
<body>
<canvas id="canvas"> canvas</canvas>
<!-- <script src="./underscore-min.js"></script> -->
<!-- underscore _.random ， -->
<script src="./index.js"></script>
</body>
</html>
// index.js
// 1、
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'
우선,canvas 요 소 를 찾 습 니 다:
const canvas=document.getElementById("myCanvas");
const ctx = canvas.getContext('2d');
필기구
// index.js
// 2、
class Ball {
constructor (x, y, color) {
this.x = x; // x
this.y = y; // y
this.color = color; //
this.r = 40; //
}
//
render () {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
4.567917.안에 constructor()방법 이 있 는데 이것 이 바로 구조 방법 이 고 this 키 워드 는 인 스 턴 스 대상 을 대표 합 니 다현재 환경 을 보존 하 는 상태
묘사 하 다.
x
원 의 중심 x 좌표.
y
원 의 중심 y 좌표.
r
원 의 반지름.
sAngle
시작 각 은 라디에이터 로 계산한다.
eAngle
끝 각 은 라디에이터 로 계산한다.
counterclockwise
선택 할 수 있다.시계 반대 방향 으로 그림 을 그 려 야 하 는 지,아니면 시계 반대 방향 으로 그림 을 그 려 야 하 는 지 를 규정 하 다.false=시계 방향,true=시계 반대 방향.
// index.js
// 3、
class MoveBall extends Ball { //
constructor (x, y, color) {
super(x, y, color);
//
//
this.dX = Random(-5, 5);
this.dY = Random(-5, 5);
// ，
this.dR = Random(1, 3);
}
// 4、
upDate () {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
// 0
if(this.r < 0) {
this.r = 0 // 0
}
}
}
// index.js
// 5、
//
let ballArr = [];
// underscore-min.js ， _.random
let Random = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
}
//
canvas.addEventListener('mousemove', function (e){
//
// let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
// bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
console.log(ballArr);
})
//
setInterval(function () {
//
ctx.clearRect(0, 0, canvas.width, canvas.height);
//
for (let i = 0 ; i < ballArr.length; i++ ) {
ballArr[i].render();
ballArr[i].upDate();
}
}, 50);
우 리 는 스크린 하지 않 고 작은 공의 반지름 이 점점 줄 어 들 면서 마지막 작은 공 은 사라 지지 않 는 다 는 것 을 볼 수 있다.왜 사람들 이 원 하 는 효 과 는 그렇지 않 을 까?모니터 의 효 과 는 무엇 일 까요?바로 문장 첫머리 의 그 효과 다!보,재미있게 놀 았 어 요.❤)
index.js 전체 코드
// 1、
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'
// 2、
class Ball {
constructor (x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
//
render () {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
// 3、
class MoveBall extends Ball { //
constructor (x, y, color) {
super(x, y, color);
//
//
this.dX = Random(-5, 5);
this.dY = Random(-5, 5);
//
this.dR = Random(1, 3);
}
// 4、
upDate () {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
// 0
if(this.r < 0) {
this.r = 0
}
}
}
// 5、
//
let ballArr = [];
// underscore-min.js ， _.random
let Random = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
}
//
canvas.addEventListener('mousemove', function (e){
//
// let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
// bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
console.log(ballArr);
})
//
setInterval(function () {
//
ctx.clearRect(0, 0, canvas.width, canvas.height);
//
for (let i = 0 ; i < ballArr.length; i++ ) {
ballArr[i].render();
ballArr[i].upDate();
}
}, 50);
이 작은 demo 가 ES6 에서 class 류 의 이해 와 사용 을 더욱 잘 알 게 해 주 기 를 바 랍 니 다.ES6 의 class 류 계승 을 어떻게 사용 하여 화려 한 작은 공 효 과 를 실현 하 는 지 에 관 한 글 은 여기까지 소개 합 니 다.더 많은 ES6 class 류 계승 실현 작은 공 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
