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

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

html 部分:

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
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. "キャンバス" id="canvas" width="600" 身長="300">キャンバス> ボディ>
13. html>
14. JavaScript 部分: XML/HTML コード
コンテンツをクリップボードにコピー

1. //初期化
2. var canvas = ドキュメント.getElementById("canvas"),
3. コンテキスト = キャンバス.getContext("2d"),
4. 画像 = 新しい 画像();
5. image.src = "img/test.jpg"; //メソッドを左から右にロード
6. 関数drawImg1(){
7. var
drawWidth
8. = 0,
間隔
9. = setInterval(function(){ context.drawImage(image, 0, 0,drawWidth, image.height, 0, 0,drawWidth, image.height);
drawWidth = 20
if(drawWidth
11. >
Canvas.width) clearInterval(間隔);
12. },100); }
13. //中央から左右へロードメソッドを開きます
14. 関数drawImg2(){
15. var
drawWidth
16. =
0
17. , drawLeft =
canvas
18. .width/2, 間隔 =
setInterval
19. (function(){ context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height); drawWidth = 20
drawLeft
20. -
=
21. 10
;
22. if(drawLeft 0) clearInterval(間隔);
},100);
23. } //段階的に水平グリッドをロードする方法
関数drawImg3(){
var
25. drawWidth
=
26. 0
,
28. spaceWidth = canvas.width/20, //10 は分割されたブロックの数を指します
29. 間隔 = setInterval(function(){
for(var
30. i = 0;i
20
31. ;i ){ context.drawImage(image, i*spaceWidth, 0,drawWidth, image.height, i*spaceWidth, 0,drawWidth, image.height); } drawWidth = 5 ; if(drawWidth
>
32. spaceWidth) clearInterval(間隔);
},100);
33. }

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