トップページ  > Canvas  > Canvasによる描画実行の流れ(ドローイング・モデル)

★Canvasリファレンス

Canvasによる描画実行の流れ(ドローイング・モデル)
広告

Canvasで図形やイメージなどを作成した場合、ユーザーエージェント上では以下のような流れで描画が実行されます。

  1. 図形やイメージは、完全に透明な黒のビットマップ Render the shape or image onto an infinite transparent black bitmap, creating image A, as described in the previous sections. For shapes, the current fill, stroke, and line styles must be honored, and the stroke must itself also be subjected to the current transformation matrix. 画像、作成、無限の透明な黒のビットマップに図形やイメージをレンダリングします。 前のセクションで説明されている通り 形状については、現在の塗りつぶし、ストローク、および線のスタイルを尊重しなければならない、 とストロークは、自身も、現在の変換行列にさらされている必要があります。
  2. 影が描画される場合には、図形やイメージから影が描画されます。 When shadows are drawn, render the shadow from image A, using the current shadow styles, creating image B. 影が描画されるときは、画像から影をレンダリング、、現在の影のスタイルを使用して作成する画像B.
  3. When shadows are drawn, multiply the alpha component of every pixel in B by globalAlpha. 影が描画されるときに、globalAlphaでB内のすべてのピクセルのアルファ成分を掛けます。
  4. When shadows are drawn, composite B within the clipping region over the current canvas bitmap using the current composition operator. 現在の合成演算子を使用して、現在のキャンバスのビットマップ上にクリッピング領域内の影が描かれている、複合B。
  5. Multiply the alpha component of every pixel in A by globalAlpha. globalAlphaでのすべてのピクセルのアルファ成分を乗算します。
  6. Composite A within the clipping region over the current canvas bitmap using the current composition operator. 現在の合成演算子を使用して、現在のキャンバスのビットマップ上にクリッピング領域内にコンポジットA。
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ