Javascript CANVASはどのように動作しますか？

Question

Javascript CANVASは驚くべきことです：ブラウザ画面に線やポリゴンのようなものを描くことができます。

Javascript CANVASはどのように動作するのでしょうか？例えば、線を描画するには、線をシミュレートするための一連の小さな画像を使用するのでしょうか？

ありがとうございます。

Answer 1

具体的には、 JavaScriptエンジンブラウザに固有の実装ですか？

Answer 2

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

なぜ重要ですか？それがあなたが疑問に思っているのであれば、HTML + CSSにはまったく関連していません。詳細のために

もっと詳しく、：ブラウザのHTMLパーサは、それがその領域をカバーするために画面上のピックスマップを割り当てる必要がある（所定の幅&高さの）canvas要素を見

。手動でこれを行うか（つまりmalloc（））、またはOSのネイティブ描画APIを呼び出して描画するサーフェスを作成します。 OSネイティブAPIは、Windows、Gtk、Kde、Qt、またはブラウザの実装者が選択したその他の図面ライブラリです。また、オペレーティングシステムに大きく依存しています。 Internet Explorerはおそらく、Windowsネイティブライブラリ（DirectXまたはWinFooBarMethod（））を呼び出します。

描画面が作成されると、JavaScriptインタプリタの内部の隙間から、描画された描画面へのポインタやハンドルを介してアクセスできるようになります。次に、JSインタプリタがキャンバスメソッドの1つの呼び出しを見ると、これを適切なOSネイティブコマンドの呼び出しに変えます。

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

し、手動で管理ピックスマップ使用：Windows 3.1のスタイルのメタファーを使ってそう

、再び

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

を、それは、これらのメソッドが実装されているか、JavaScriptの開発者には関係ないはず。気にする必要があるのは、キャンバスをサポートするHTML5準拠のWebブラウザを作成している人だけです。

Answer 3

線画の作成方法については、Bresenham's Line Drawing Algorithmをご覧ください。あなたが考えている

Answer 4

はあまり、それは簡単です：

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

Answer 5

実装が重要だと思います。なぜそれは重要ですか？フラッシュを見てください。描画APIを使用して複雑なフラクタルアートワークを作成すると、実際にはベクトルアートワークが作成され、描画されるオブジェクトのすべての線と曲線が作成されるため、フレームごとにベクターアートワークが再表示されます。 chug ... chug ........ chug .............. 複雑なフラクタルや方程式を記録するアートでは、ビットマップやレンダリングエンジンを使用する必要がありますCACKS。私はフラッシュ・マルチメディアのいくつかをJavascriptに転送しようとしているし、ブラウザー間の違いに遭遇しているので、違いがあります。

Answer 6

C++を知っているなら、ソースに行くことができます。

たとえば、Firefoxでは、「グラフィックスコンテキスト」オブジェクトはクラスnsCanvasRenderingContext2Dによって実装されます。しかし、そのクラスは実際にピクセルを直接変更するわけではありません。代わりに、Thebesと呼ばれる別のオブジェクトにその作業を要求します。 Thebesは次に、この作業をCairoというグラフィックスライブラリに委任します。これは通常、オペレーティングシステムによって提供されたライブラリに実際のピクセル作業を依頼します。私はそれがどこでも似たような話だと思います。

最下部には、キャンバスに2次元のピクセル配列があります。各ピクセルは32ビットの整数です。ピクセルは、配列の要素に値を代入することによって設定されます。どこかに、塗りつぶすピクセルを決定し、適切な値を適切な配列要素に割り当てるコードがあります。

理論上、ピクセルはビデオカードによって描画されることがありますが、3Dグラフィックスを積極的に調整し、精度があまりにも高すぎるため、一般的に2Dグラフィックスを信頼することはできません。速度のために。