JavaScript:畫一個點

讓我們學習如何在瀏覽器中用 JavaScript 畫一個點。這在技術上並不難,但只適用於那些摸索的人,以及那些不准備在互聯網上畫一個點的人——這當然是一個完整的成就。

畫點的方法有很多種,一起來看看吧

遊戲構造函數



使用 Unity/Godot/microStudio 或數以千計的遊戲構建者中的任何一個......他們都會以一種或另一種方式創建一些代碼,這些代碼將是 JavaScript 或 Webassembly,並且仍然向我們展示了這一點。我們對這條路不感興趣。我們不會真正理解發生了什麼,對代碼的控制將是最小的並且在源代碼中不可讀,而且它是巨大的。

JavaScript 框架

這條絕地之路離我們越近越好,因為。我們的代碼不會像白天那樣大而清晰,我們不會抽象太多,我們不會用庫大大增加我們的代碼。代碼控制也很棒

純 JavaScript

這當然是絕地的方式。代碼盡可能的複雜,最大限度地控制了一些可以說是不需要控制的東西。源代碼是最少的,並且有了 golimy JavaScript 的知識,我們可以放心地去找工作,因為。我們需要這樣的人。

但我們的任務不是找工作,而是用簡單易行的方式畫一個點。我們的載體是速度和靈活性。

我選擇了圖書館

p5js 畫一個點。當然,不僅僅是這樣,如果任務是畫一個點,就是這樣,當然,一切都必須在純 JavaScript 中完成,但我是從透視的角度來做的,.k。然後你和我會做其他看起來很棒的事情,為此我們需要一個好的工具。其中之一是 p5js。

在 golim JavaScript 中,我們需要創建一個畫布來定義初始化和重繪功能,在 p5 中也是這樣做的,但是非常簡潔。

但首先..

JavaScript 開發的最低環境設置

下載

p5.min.js 並將其並排放置。

像這樣

索引.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 代碼?

setup 函數是初始化的,它執行一次,我們在其中創建一個畫布,即我們將畫一個點的區域。窗口.innerWidth, 窗口.innerHeight

是屏幕的寬度和高度,即我們定義了一個全屏畫布,是的,HTML 對此也有一個非常重要的樣式

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

Больше инициализировать нам ничего не надо,а просто надо нарисовать точку. Тут смотрите какой принцип.. функция draw выполняется например 60 раз в секунду, и 60 раз в секунду мы будем рисовать нашу точку.. казалось бы что это тупо, нам же просто точку надо нарисовать и все, но в дальнейшем это будет основа вообще для всей анимации.

Вообще код рисования точки крайне прост:

point(10,10)

и все !

Однако наш код немного больше

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

фон черный

звезда белая

толщина точки 10

и рисуем мы ее по центру вертикали и горизонтали.

Что же.. мы нарисовали точку на канвасе, все как полагается, но но мы могли вообще нарисовать ее и на чистом HTML без всяких JavaScript.. Как это бы выглядело ?

Делает это элементарно и даже проще, но принципы совсем другие, вот конечный код рисования уже квадратика в центре экрана

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