연말까지 매일 웹 사이트를 꾸준히 제작하는 대학생~64일째 랜덤 위치에서 랜덤으로 입력 문자를 표시합니다~

13651 단어 JavaScript

개시하다


안녕하세요@70days_js
문자를 입력하면 임의의 위치에 임의의 크기로 표시됩니다.gif↓

64일째.(2019/12/21)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


이벤트 청취자 포착 버튼을 통해 문자를 입력하여 대상을 하나씩 만듭니다.
50자를 입력하면 모든 대상은 사라진다.
html↓
 <body>
    <div id="countWrapper">COUNT: <span id="count"></span></div>
    <canvas id="canvas"></canvas>
  </body>
css↓
body {
  height: 100vh;
  margin: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#canvas {
  border: solid 1px rgba(31, 227, 13, 1);
}

#countWrapper {
  color: rgba(31, 227, 13, 1);
  padding-bottom: 20px;
}
JavaScript(61줄)↓
let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  twidth = (canvas.width = 500),
  theight = (canvas.height = 500),
  chars = [],
  count = document.getElementById("count"),
  fontSize = Math.random() * 100,
  countNumber = 0;

function Character(ctx, e) {
  this.ctx = ctx;
  this.x = Math.floor(Math.random() * twidth);
  this.y = Math.floor(Math.random() * theight);
  this.size = fontSize;
  this.char = String.fromCharCode(e.keyCode);
}

Character.prototype.render = function() {
  this.draw();
};

Character.prototype.draw = function() {
  let ctx = this.ctx;
  ctx.beginPath();
  ctx.fillStyle = "rgba(31, 227, 13, .5)";
  ctx.font = this.size + "px Arial";
  ctx.fill();
  ctx.fillText(this.char, this.x, this.y);
  ctx.closePath();
};

//_________keydown_________;
document.addEventListener("keydown", logKey, false);

function logKey(e) {
  if (countNumber >= 50) {
    countNumber = 0;
    chars.length = 0;
    alert("Characters are not eternal.");
  } else if (e.keyCode < 65 || e.keyCode > 91) {
    return false;
  } else {
    let char = new Character(ctx, e);
    chars.push(char);
    countNumber++;
    count.innerHTML = countNumber;
  }
}

function render() {
  fontSize = Math.random() * 100;
  ctx.clearRect(0, 0, twidth, theight);
  for (var i = 0; chars.length > i; i++) {
    let char = chars[i];
    char.render();
  }

  requestAnimationFrame(render);
}

render();
function Character(ctx, e) {...}
↑ 이것은 구조기다.
위치, 크기 및 문자를 포함합니다.
여러 가지 물건을 가득 채우고 나니 지도원의 역할을 감당할 수 있을지 고민이다.
구조기로 대상의 고유한 값을 입력하는 것은 어떻습니까?
이 대상은render () 방법을 통해draw () 방법을 실행합니다.
메서드 수가 증가하면 render () 메서드를 사용합니다.
render 함수 (방법이 아닙니다) 는 fontsize를 무작위 값으로 다시 설정합니다.
fontSize = Math.random() * 100;
송이경(신지현)
이것은 지금 화포를 기다리고 있다.↓
ctx.clearRect(0, 0, twidth, theight);
for 문장에서 모든 대상을 실행하는 방법입니다.↓
for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}

감상


오늘 나는 내가 너무 많이 한 것을 반성했다.
대상을 대상으로 하는 프로그래밍서를 잘 읽어야 한다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
พื้นฐานของ HTTP 서버ของ 패키지 net/http
Docker Build 기간 기밀 관리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage