次の日の学習経験のフロントエンド(API HTML5キャンバスとキャンバスの予備的な理解の一部)

、HTML5 APIの一部

  1、及びセレクタquerySelector querySelectorAll

    1.1、querySelector:ドキュメント内の最初の要素は、指定されたCSSセレクタを一致返します。      

       document.querySelector(CSSセレクタ)、CSSセレクタは(要素を選択するためにそれらを等ID、クラス、タイプ、属性、属性値を、使用することができる1つのまたは複数の一致する要素CSSセレクタを指定します。

      コンマで区切られた複数のセレクタは、要素が一致を返します

    1.2、querySelectorAll:HTML5は、新しい方法は、文書照合CSSセレクタのすべての要素のノードのリストを返す導入。 

        = document.querySelectorAll ElementList(CSSセレクタ)、静的オブジェクトがElementList型のNodeListであり、CSSセレクタ掲

  2、カスタムプロパティ

    カスタム属性名(つまり*号)はデータ - 少なくとも一つの文字を持っている必要があり、大文字を含めないでください場合は、完了するために、「*データ - 」HTML5で属性を使用してください。このプロパティは、任意の文字列を指定することができます。

    私たちは、カスタムデータテスト名の属性の後に、例えば、我々はテスト名だった特定の値を取得するために、プロパティを取得するために、セレクタを呼び出します。

第二に、キャンバスキャンバス

  図1に示すように、キャンバスの新しいタグキャンバス長さと幅を定義注:​​ラベルに定義されたキャンバスキャンバスのみキャンバスの長さと幅を、CSSで定義することができません

  

  2、Canvasオブジェクトを取得し、(canvas要素自体が電力を引き出す。すべての作業は、社内でJavaScriptをレンダリング行う必要がありますされていない)コンテキストオブジェクトのキャンバスを作成します

  

   3、すなわちペンダウンポイント(のmoveTo(X、Y))を決定し、開始点を決定します。X:X軸は画素、Yを起動し、Y軸はピクセルを起動します

    

  図4は、次のペンダウンポイント(のlineTo(X、Y))を決定します。X:X軸ペンダウン画素、Y:ダウンy軸画素ペン

  

  図5に示すように、接続行程(ストローク())

  

  結果は以下の通りであります:

   

 

 

 

 

 

  

 

 

 

 

   

    

 

    

おすすめ

転載: www.cnblogs.com/Amaris-Lin/p/11733939.html
おすすめ