讓我們學習如何在瀏覽器中用 JavaScript 畫一個點。這在技術上並不難,但只適用於那些摸索的人,以及那些不准備在互聯網上畫一個點的人——這當然是一個完整的成就。
畫點的方法有很多種,一起來看看吧
使用 Unity/Godot/microStudio 或數以千計的遊戲構建者中的任何一個......他們都會以一種或另一種方式創建一些代碼,這些代碼將是 JavaScript 或 Webassembly,並且仍然向我們展示了這一點。我們對這條路不感興趣。我們不會真正理解發生了什麼,對代碼的控制將是最小的並且在源代碼中不可讀,而且它是巨大的。
這條絕地之路離我們越近越好,因為。我們的代碼不會像白天那樣大而清晰,我們不會抽象太多,我們不會用庫大大增加我們的代碼。代碼控制也很棒
這當然是絕地的方式。代碼盡可能的複雜,最大限度地控制了一些可以說是不需要控制的東西。源代碼是最少的,並且有了 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 中編寫一個隨機數生成器,但是這樣的代碼會看起來完全醜陋、不可讀且難以理解!