JavaScript：ドットを描く

ブラウザでJavaScriptを使ってポイントを描く方法を学びましょう。技術的に難しいことではありませんが、手探りの人やインターネットでポイントを描く準備ができていない人だけが、これはもちろん全体の成果です。

ポイントを描く方法はたくさんありますが、それらを見てみましょう

ゲームコンストラクター

Unity / Godot / microStudioまたは数千のゲームビルダーのいずれかを使用して..それらはすべて、JavaScriptまたはWebassemblyとなる何らかのコードを作成し、それでもポイントを示します。私たちはこの道には興味がありません。何が起こっているのかを実際に理解することはできません。コードの制御は最小限であり、ソースコードでは非常に大きく、読み取り不能になります。

JavaScriptフレームワーク

ジェダイのこの道は私たちにできるだけ近いからです。私たちのコードは、日として大きく明確になることはなく、抽象化することも、ライブラリを使用してコードを大幅に増やすこともありません。コード制御も素晴らしいでしょう

純粋なJavaScript

もちろん、これはジェダイのやり方です。コードは可能な限り複雑であり、いわば制御する必要のないものを最大限に制御します。ソースコードは最小限であり、golimy JavaScriptの知識があれば、安全に仕事に取り掛かることができます。そのような人が必要です。

しかし、私たちの仕事は仕事を見つけることではなく、シンプルで簡単な方法で点を描くことです。私たちのベクトルはスピードと柔軟性です。

私は図書館を選びました

p5js ドットを描画します。もちろん、それだけではありません。もちろん、タスクがポイントを描くことであり、それだけの場合は、もちろん、すべてが裸のJavaScriptで行われる必要がありますが、私はこれを視点で行っています。その後、あなたと私は素晴らしいように見える他のことをします、そしてこれのために私たちは良いツールを必要とします。それらの1つはp5jsです。

golim JavaScriptでは、初期化関数と再描画関数を定義するためのキャンバスを作成する必要があります。p5では、これも実行されますが、非常に簡潔です。

でもまず..

JavaScript開発のための最小限の環境設定

index.html
Sketch.js

ダウンロード

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>

Sketch.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;">

他に何も初期化する必要はありません。ドットを描画するだけです。ここで原理を見てください..描画関数が実行されます。たとえば、1秒間に60回、1秒間に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の原則に従って考える必要があります。それは非常に興味深い仕事ですが。これをすべて殺すのは1つの基本的なことだけで、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