연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~69일 대상과 마우스, 원

13573 단어 JavaScript

개시하다


안녕하세요@70days_js
나는 어제와 같이 엔으로 놀았다.
어제는 자동이었지만 오늘은 마우스와 함께 원을 만들 수 있다.(gif)↓

오늘은 69일째다.(2019/12/26)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


마우스를 기준으로 원을 만듭니다.
css가 없습니다.
html↓
  <body>
    <canvas id="canvas"></canvas>
  </body>
JavaScript↓
let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  canvasW = (canvas.width = window.innerWidth),
  canvasH = (canvas.height = window.innerHeight),
  circles = [];

function Circle(ctx, x, y, size) {
  this.ctx = ctx;
  this.x = x;
  this.y = y;
  this.size = size;
  this.r = Math.random() * 256;
  this.g = Math.random() * 256;
  this.b = Math.random() * 256;
  this.a = Math.random() * 11;
  this.v = Math.ceil(Math.random() * 3);
}

Circle.prototype.render = function() {
  this.draw();
  this.statusChange();
};
Circle.prototype.draw = function() {
  let color = this.r + "," + this.g + "," + this.b + "," + this.a;
  let ctx = this.ctx;
  let random = Math.ceil(Math.random() * 2);
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  if (random > 1) {
    ctx.strokeStyle = "rgba(" + color + ")";
    ctx.stroke();
  } else {
    ctx.fillStyle = "rgba(" + color + ")";
    ctx.fill();
  }
  ctx.closePath();
};

Circle.prototype.statusChange = function() {
  this.size += 1;
  if (this.size > canvasW / 3 || this.size > canvasH / 3) {
    this.size = 0;
  }
};

document.body.addEventListener("mousemove", createCircleObject);

function createCircleObject(e) {
  let x = e.pageX;
  let y = e.pageY;
  let size = Math.random() * 10;
  let circle = new Circle(ctx, x, y, size);
  circles.push(circle);
}

function render() {
  ctx.clearRect(0, 0, canvasW, canvasH);
  circles.forEach(function(obj) {
    obj.render();
  });

  requestAnimationFrame(render);
}

render();
대부분이 어제와 같기 때문에 다른 점을 설명한다.
먼저 이벤트 청중 중 중 중 마우스로 이동해서 대상을 만듭니다.
document.body.addEventListener("mousemove", createCircleObject);
객체는 마우스 통과 위치에 있을 수 있습니다.
function createCircleObject(e) {
let x = e.pageX;
let y = e.pageY;
let size = Math.random() * 10;
let circle = new Circle(ctx, x, y, size);
circles.push(circle);
}
어제는 사이즈가 더 컸는데 이번에는 조금 조정했어요.
엔화가 갈수록 커지고 있지만 어제 설정한 최대치보다 낮다.
또한 최대한 커지면 위치가 변하지 않고 사이즈만 0부터 시작하여 z축이 이동할 때의 시차 효과를 얻을 수 있다.
if (this.size > canvasW/3 || this.size > canvasH/3) {
this.size = 0;
gif를 보면 안에서 앞으로 이동하는 것 같나요?

감상


오세로 안 하면
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
ie에서div의 절대 경계가 틀렸습니다.
scrapy의 xpath 문법 및 디버깅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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