検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 はアニメーションの形式で画像を読み込みます _html5 チュートリアル スキル

HTML5 はアニメーションの形式で画像を読み込みます _html5 チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:51:481865ブラウズ

この例では、HTML5 キャンバス タグと JavaScript スクリプトを使用して、読み込み画像効果を単純に記述しています。効果をプレビューするには、HTML5 をサポートするブラウザを使用してください。
下の図は、徐々に水平方向のグリッドの効果を示しています。

html 部分:
XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html lang="en" >
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <タイトル>html5 読み込み画像 タイトル>
  6. 頭>
  7. <ボディ>
  8. <ボタン onclick="drawImg1( )">左から右へボタン>
  9. <ボタン onclick="drawImg2( )">中央から左右ボタン>
  10. <ボタン onclick="drawImg3( " > <hr/>
  11. <キャンバス クラス
    12. =
  12. "キャンバス" id="canvas" width="600" 身長="300">キャンバス> ボディ>
  13. html>
  14. JavaScript 部分: XML/HTML コード
    15. コンテンツをクリップボードにコピー
  1. //初期化
  2. var canvas = ドキュメント.getElementById("canvas"),
  3. コンテキスト = キャンバス.getContext("2d"),
  4. 画像 = 新しい 画像();
  5. image.src = "img/test.jpg"; //メソッドを左から右にロード
  6. 関数drawImg1(){
  7. var
    8. drawWidth
  8. = 0,
    9. 間隔
  9. = setInterval(function(){ context.drawImage(image, 0, 0,drawWidth, image.height, 0, 0,drawWidth, image.height);
    10. drawWidth = 20
    11. if(drawWidth
  11. >
    12. Canvas.width) clearInterval(間隔);
  12. },100); }
  13. //中央から左右へロードメソッドを開きます
  14. 関数drawImg2(){
  15. var
    16. drawWidth
  16. =
    17. 0
  17. , drawLeft =
    18. canvas
  18. .width/2, 間隔 =
    19. setInterval
  19. (function(){ context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height); drawWidth = 20
    20. drawLeft
  20. -
    21. =
  21. 10
    22. ;
  22. if(drawLeft < 0) clearInterval(間隔);
    23. },100);
  23. } //段階的に水平グリッドをロードする方法
    24. 関数drawImg3(){
    25. var
  25. drawWidth
    26. =
  26. 0
    27. ,
  28. spaceWidth = canvas.width/20, //10 は分割されたブロックの数を指します
  29. 間隔 = setInterval(function(){
    30. for(var
  30. i = 0;i<
    31. 20
  31. ;i ){ context.drawImage(image, i*spaceWidth, 0,drawWidth, image.height, i*spaceWidth, 0,drawWidth, image.height); } drawWidth = 5 ; if(drawWidth
    32. >
  32. spaceWidth) clearInterval(間隔);
    33. },100);
  33. }

上記の内容は、HTML5 で画像をアニメーション形式で読み込むためのエディターによる紹介です。皆さんの参考になれば幸いです。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：シンプルな画像プリロード コンポーネントを使用して、HTML5 モバイル ページのユーザー エクスペリエンスを向上させる _html5 チュートリアルのスキル次の記事：シンプルな画像プリロード コンポーネントを使用して、HTML5 モバイル ページのユーザー エクスペリエンスを向上させる _html5 チュートリアルのスキル

関連記事

続きを見る