動的なexCanvasの作成

著者( SiDChik@mail.ru )はアカウントを持っていないため、この記事を投稿するように説得しました


最近、私はWEB開発者としての仕事を得て、オンラインマップを作成しました。 ありふれた動きに加えて、地図上にさまざまなオブジェクトを描画する必要があります。これにはCanvasを使用します。 Habréで検索すると、このテクノロジーに関するトピックがいくつか見つかります。 簡単に言うと、これはJavaScriptを使用してグラフィックをレンダリングするためのツールです。

デフォルトでは、このツールはIEではサポートされていません。このため、 ExCanvasスクリプトを検索して見つけることができます。 インストールするには、1つのJavaScriptファイルを接続するだけです。



作業の過程で、キャンバスの動的な作成を必要とする状況が現れました。 残念ながら、 document.createElement( 'canvas')のようなもの; IEでの作業を拒否しました。 また、getContent関数を呼び出すときにエラーが発生しました。 同時に、出力は「フォーク」製品である必要があります。したがって、クロスブラウザのアクセシビリティが必要です。





グーグルは、エラーの修正を約束したある種のプログラマーによって追加されたスクリプトの別のバージョンを発見しました( NewExcanvas )。 このトピックで説明されているオプションは完全に機能していませんでした。 逆説的に、それは事実でした-Google Chromeで動作することを拒否しました! 最後に、簡単な関数が書かれました:



//// (, )

function createCanvas(w,h)

{

var canvas = excanvas( document .createElement( "canvas" ));

if (canvas===undefined)

{

var canvas = document .createElement( "canvas" );

}

canvas.width=w;

canvas.height=h;



canvas.style.width=w+ 'px' ;

canvas.style.height=h+ 'px' ;



return canvas

}



* This source code was highlighted with Source Code Highlighter .








キャンバスを作成するには、オブジェクトの幅と高さを指定する必要があることがコードからわかります。 同時に、スタイルを介してこれらのサイズを指定し、対応する属性の値を変更する必要があります。

このテクノロジーはnixブラウザでも動作し、追加のプラグインをインストールする必要がないことに注意してください。 したがって、このツール用にカジュアルゲームを書き換える場合、クロスブラウザーアクセシビリティと小さな要件のために、プロジェクトの大規模さに頼ることができます。



All Articles