javascript - JavaScript CANVAS はどのように機能しますか?

Question

Javascript CANVAS は驚くべきものです。ブラウザー画面に線や多角形などを描くことができます。

Javascript CANVAS はどのように機能するのだろうか。たとえば、線を描画するには、一連の整列された小さな画像を使用して線をシミュレートするか、他のアプローチを使用しますか?

前もって感謝します。

Answer 1

合理的な実装者は、ビットマップ (ブラウザーに内部的に格納されている) を使用し、OS ネイティブの描画コマンドを使用して描画します。

なぜそれが重要なのですか？HTML+CSS とはまったく関係ありません。

詳細のために、より詳細に：

ブラウザーの HTML パーサーが (指定された幅と高さの) canvas 要素を検出すると、その領域をカバーするために画面上のピックスマップを割り当てる必要があります。これは手動で行うか (つまり、malloc())、OS ネイティブの描画 API を呼び出して、描画するサーフェスを作成します。OS ネイティブ API は、Windows、Gtk、Kde、Qt、またはブラウザの実装者が選択したその他の描画ライブラリです。また、オペレーティング システムに大きく依存します。Internet Explorer はおそらく Windows ネイティブ ライブラリ (つまり、DirectX または WinFooBarMethod()) を呼び出します。

描画面が作成されると、おそらく構築された描画面へのポインターまたはハンドルを介して、JavaScript インタープリターの内部ガットにアクセスできるようになります。次に、JS インタープリターがキャンバス メソッドの 1 つの呼び出しを確認すると、これを適切な OS ネイティブ コマンドの呼び出しに変換します。

したがって、Windows 3.1 スタイルの比喩を使用すると、次のようになります。

"new canvas(width, height)" = "WinCreatePixmap(width, height)" 
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)"

そして、手動で管理されたピックスマップを使用します:

"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))"
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;" 

繰り返しますが、これらのメソッドがどのように実装されているかは、JavaScript 開発者にとって重要ではありません。気にする必要があるのは、canvas をサポートする HTML5 準拠の Web ブラウザーを作成している人だけです。

Answer 2

問題のJavaScript エンジンブラウザに固有の実装なのでしょうか?

Answer 3

あなたは考えすぎです、それは簡単です：

キャンバスは、ブラウザ上に描画できる画像のようなものです。

Answer 4

線画のしくみに興味がある場合は、Bresenham の Line Drawing Algorithmを調べてください。