JavaScript: vẽ một dấu chấm

Chúng ta hãy học cách vẽ một điểm trong JavaScript trên trình duyệt .. nó không khó về mặt kỹ thuật, nhưng chỉ dành cho những người mò mẫm, và đối với những người không chuẩn bị để vẽ một điểm trên Internet - đây tất nhiên là một thành tựu.

Có nhiều cách để vẽ một điểm, hãy xem chúng

Trình xây dựng trò chơi



Sử dụng Unity / Godot / microStudio hoặc bất kỳ trong số hàng nghìn trình xây dựng trò chơi .. tất cả họ sẽ tạo một số mã theo cách này hay cách khác sẽ là JavaScript hoặc Webassembly, và vẫn cho chúng ta thấy điểm chính.Chúng tôi không quan tâm đến con đường này.chúng ta sẽ không thực sự hiểu những gì đang xảy ra, quyền kiểm soát đối với mã sẽ là tối thiểu và không thể đọc được trong mã nguồn, bên cạnh đó nó là rất lớn.

Khung JavaScript

Con đường này của Jedi càng gần chúng ta càng tốt, bởi vì.mã của chúng tôi sẽ không còn lớn và rõ ràng như ngày nào, chúng tôi sẽ không trừu tượng hóa nhiều, chúng tôi sẽ không tăng mã của chúng tôi nhiều với các thư viện.Kiểm soát mã cũng sẽ tuyệt vời

JavaScript thuần túy

Tất nhiên đây là cách của Jedi.Mã càng phức tạp càng tốt, kiểm soát tối đa những thứ, như nó vốn có, không cần phải kiểm soát.Các mã nguồn là tối thiểu nhất và với kiến ​​thức về JavaScript golimy, chúng ta có thể yên tâm đi xin việc, bởi vì.chúng ta cần những người như vậy.

Nhưng nhiệm vụ của chúng ta không phải là tìm một công việc mà là vẽ một dấu chấm một cách đơn giản và dễ dàng.Véc tơ của chúng tôi là tốc độ và tính linh hoạt.

Tôi đã chọn thư viện

p5js để vẽ một dấu chấm.Tất nhiên, không chỉ có vậy, nếu nhiệm vụ là vẽ một điểm và đó là điều tất nhiên, mọi thứ sẽ phải được thực hiện bằng JavaScript đơn thuần, nhưng tôi đang làm điều này theo quan điểm, .k.thì bạn và tôi sẽ làm những việc khác trông sẽ tuyệt vời, và để làm được điều này, chúng ta cần một công cụ tốt.Một trong số đó là p5js.

Trong JavaScript golim, chúng ta cần tạo canvas để xác định các hàm khởi tạo và vẽ lại, trong p5 điều này cũng được thực hiện nhưng rất ngắn gọn.

Nhưng trước tiên..

Thiết lập môi trường tối thiểu để phát triển JavaScript

Tải xuống

p5.min.js và giữ nó bên cạnh nhau.

như thế này

index.html

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

sketch.js

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

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

Kết quả là trình duyệt của bạn sẽ mở như thế này

Vâng, HTML có thể hiểu được, nhưng đây là loại mã JavaScript nào?

chức năng thiết lập là khởi tạo, nó được thực thi một lần, trong đó chúng tôi tạo một canvas, tức làkhu vực mà chúng tôi sẽ vẽ một điểm.window.innerWidth, window.innerHeight

là chiều rộng và chiều cao của màn hình, tức làchúng tôi xác định canvas toàn màn hình và vâng, HTML cũng có một phong cách rất quan trọng cho việc này

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

Chúng ta không cần khởi tạo bất cứ thứ gì khác, chúng ta chỉ cần vẽ một dấu chấm.Hãy xem nguyên tắc ở đây .. hàm draw được thực thi, ví dụ: 60 lần mỗi giây và 60 lần mỗi giây chúng ta sẽ rút ra quan điểm của mình .. có vẻ như điều này thật ngu ngốc, chúng ta chỉ cần vẽ một điểm và đó là nó, nhưng trong tương lai nó sẽ là cơ sở cho tất cả hoạt ảnh nói chung.

Nói chung, mã để vẽ một điểm cực kỳ đơn giản:

point(10,10)

và tất cả!

Tuy nhiên, mã của chúng tôi lớn hơn một chút

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

nền đen

ngôi sao trắng

độ dày chấm 10

và chúng tôi vẽ nó ở trung tâm của chiều dọc và chiều ngang.

Chà .. chúng tôi đã vẽ một dấu chấm trên canvas, mọi thứ đều như vậy, nhưng chúng tôi thậm chí có thể vẽ nó trên HTML thuần túy mà không cần bất kỳ JavaScript nào .. Nó sẽ trông như thế nào?

Nó làm cho nó trở nên cơ bản và thậm chí dễ dàng hơn, nhưng các nguyên tắc hoàn toàn khác nhau, đây là mã cuối cùng để vẽ một hình vuông ở giữa màn hình

<!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>

Kết quả gần giống nhau

Vâng, khá dễ dàng để vẽ một cái gì đó ở giữa trong HTML, nhưng để thêm hình ảnh động và thậm chí là tương tác lành mạnh, bạn sẽ phải suy nghĩ theo các nguyên tắc của CSS.Mặc dù nó là một nhiệm vụ khá thú vị.Chỉ có một điều cơ bản giết chết tất cả những điều này, không có số ngẫu nhiên nào trong CSS, điều này sẽ giết chết mọi nỗ lực của chúng tôi trong tương lai, đó là lý do tại sao tôi sẽ ít ưu tiên hơn cho hướng này.

Nếu tôi tưởng tượng rằng tôi muốn tạo ra một bầu trời đầy sao trên CSS trần, thì mọi thứ sẽ không thành công với tôi, bởi vìcác ngôi sao sẽ xuất hiện ở các vị trí ngẫu nhiên, và nếu chúng có tọa độ được tạo trước, nó sẽ không đẹp và không đơn giản như vậy, bởi vì bạn có thể viết một trình tạo số ngẫu nhiên trong CSS, nhưng mã như vậy sẽ trông hoàn toàn xấu xí, khó đọc và khó hiểu biết!





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