Html5 Canvas Imageのグラフィックコードの詳細説明(1)

Canvas がサポートする画像 API は非常に強力で、画像を直接ロードして Canvas に表示したり、表示に必要な画像部分を切り取ったり接合したりすることもできます

さらに、Canvas はピクセル データを保存する機能を使用すると、ピクセル データを操作してキャンバスに再描画できます。

Canvas はいくつかの Image API 関数しか提供しませんが、開発者はプラグインを使用せずに、最適化されたアプリケーションを Web ブラウザーで直接作成できます

。

Canvas API を使用すると、DOM で定義された Image オブジェクト :、

へのアクセスが可能になり、javascript: var img1= を使用した Image オブジェクト インスタンスの作成もサポートされます。 new Image ();

画像を作成した後、次のようにパスを設定できます。

画像がコード内で呼び出されるときは、ロードできることを確認し、イメージのload

イベントが発生したときに、イメージに対する操作をトリガーするリスニングイベントを作成できます

ener('load' 、eventLoaded、false);

画像が完全にロードされると、eventLoaded がトリガーされて実行され、画像に対して操作を実行できます。 /画像操作のメインメソッドエントリ }

Display Image (画像を表示);

Method: drawImage(image,x,y):

image は、表示される画像を表します。描画;

(x, y) は、画像が Canvas 上に描画されるときの画像の左上隅の位置を表します。 drawImage(image,x,y,width,height

):

image は元の画像を表します。

パラメータ [width, height] に従って画像を調整して NewImage を形成します。 (x,y) は、Canvas 上に描画されるときの NewImage の左上隅の位置を表します。 , sy, sw, sh, x, y, width, height)

image 元の画像を表します。Point (sx, xy) と [width sw, height sh] は長方形を形成します。画像の操作、元の画像の一部を取得して新しいpartImageを形成します パラメータ[幅、高さ]に従ってpartImageを配置し、NewImageを形成します。

(x,y) は、Canvas 上に描画されるときの NewImage の左上隅の位置を表します。 :

以上がHtml5 Canvas Imageのグラフィックコードの詳細説明(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。