JavaScript: 점 그리기

브라우저에서 JavaScript로 점을 그리는 방법을 알아봅시다. 기술적으로 어렵지는 않지만 인터넷에서 점을 그릴 준비가 되지 않은 사람들과 더듬거리는 사람들을 위한 것입니다. 이것은 물론 완전한 성과입니다.

점을 그리는 방법에는 여러 가지가 있습니다. 살펴보겠습니다.

게임 생성자



Unity/Godot/microStudio 또는 수천 명의 게임 빌더를 사용하여.. 그들은 모두 어떤 방식으로든 JavaScript 또는 Webassembly가 될 일부 코드를 생성하고 여전히 요점을 보여줍니다.우리는 이 경로에 관심이 없습니다.우리는 무슨 일이 일어나고 있는지 정말로 이해하지 못할 것이고, 코드에 대한 제어는 최소화되고 소스 코드에서 읽을 수 없을 것입니다.

자바스크립트 프레임워크

제다이의 이 길은 우리에게 최대한 가깝기 때문입니다.우리의 코드는 크고 명확하지 않을 것이고, 많이 추상화하지 않을 것이며, 라이브러리로 코드를 크게 늘리지 않을 것입니다.코드 컨트롤도 훌륭할 것입니다.

순수 자바스크립트

이것은 물론 제다이의 방식입니다.코드는 가능한 한 복잡하며 제어할 필요가 없는 것까지 최대한 제어할 수 있습니다.소스 코드는 가장 최소한이며 golimy JavaScript에 대한 지식이 있으면 안전하게 취직할 수 있기 때문입니다.우리는 그런 사람들이 필요합니다.

그러나 우리의 임무는 일자리를 찾는 것이 아니라 간단하고 쉬운 방법으로 점을 그리는 것입니다.우리의 벡터는 속도와 유연성입니다.

나는 도서관을 선택했다

p5js 점을 그리려면.물론, 작업이 점을 그리는 것이면 모든 것이 베어 JavaScript로 수행되어야 하지만 저는 원근감 있는 .k에서 이 작업을 수행하고 있습니다.그러면 당신과 나는 놀랍게 보일 다른 일을 할 것이며 이를 위해서는 좋은 도구가 필요합니다.그 중 하나가 p5js입니다.

golim JavaScript에서 초기화 및 다시 그리기 기능을 정의하기 위해 캔버스를 만들어야 합니다. p5에서도 이 작업이 수행되지만 매우 간결합니다.

하지만 먼저..

JavaScript 개발을 위한 최소 환경 설정

다운로드

p5.min.js 그리고 나란히 두세요.

이와 같이

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

스케치.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

    function draw() {
    background(0);
    stroke('white');
    strokeWeight(10);
    point(window.innerWidth/2,window.innerHeight/2);
    }

브라우저에서 다음과 같이 열립니다.

글쎄, HTML은 이해할 수 있지만 이것은 어떤 종류의 JavaScript 코드입니까?

설정 기능은 초기화이며 한 번 실행되며 캔버스를 생성합니다.점을 그릴 영역입니다.window.innerWidth, window.innerHeight

는 화면의 너비와 높이입니다.우리는 전체 화면 캔버스를 정의하고 예, HTML에는 이에 대한 매우 중요한 스타일이 있습니다.

<body style="margin: 0px;">

다른 것을 초기화할 필요가 없습니다. 점만 그리면 됩니다.여기에서 원리를 보세요 .. 그리기 기능이 실행됩니다. 예를 들어 초당 60번, 그리고 초당 60번 우리는 우리의 점을 그릴 것입니다 .. 이것은 어리석은 것처럼 보일 것입니다. 우리는 점을 그리면 됩니다. 하지만 앞으로는 일반 모든 애니메이션의 기초가 될 것입니다.

일반적으로 점을 그리는 코드는 매우 간단합니다.

point(10,10)

그리고 그게 다야!

그러나 우리의 코드는 약간 더 큽니다.

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

배경 검정

하얀 별

도트 두께 10

수직과 수평의 중심에 그립니다.

음.. 우리는 캔버스에 점을 그렸습니다. 모든 것이 원래대로이지만 JavaScript 없이 순수한 HTML로 그릴 수도 있습니다. 어떻게 생겼을까요?

기본적이고 훨씬 쉽게 만들지만 원리는 완전히 다릅니다. 화면 중앙에 사각형을 그리는 최종 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
    <div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>

결과는 거의 같다

예, HTML에서 중앙에 무언가를 그리는 것은 매우 쉽지만 애니메이션을 추가하려면, 더 나아가 정상적인 대화형을 추가하려면 CSS의 원칙에 따라 생각해야 합니다.꽤 흥미로운 작업이지만.단 하나의 기본 요소만 이 모든 것을 죽입니다. CSS에는 임의의 숫자가 없습니다. 이것은 미래에 우리의 모든 시도를 죽일 것입니다. 그래서 저는 이 방향을 덜 선호할 것입니다.

내가 CSS에서 별이 빛나는 하늘을 만들고 싶다고 상상한다면 모든 것이 나에게 적합하지 않을 것입니다. 왜냐하면별은 임의의 위치에 나타나야 하며 미리 생성된 좌표가 있는 경우 CSS에서 난수 생성기를 작성할 수 있기 때문에 그렇게 아름답거나 간단하지 않을 것입니다. 그러나 그러한 코드는 완전히 보기 흉하고 읽기 어렵고 이해하다!





bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese