HTML5 loads images in the form of animation _html5 tutorial skills-H5 Tutorial-php.cn

HTML5 loads images in the form of animation _html5 tutorial skills

WBOY

Release： 2016-05-16 15:51:48

Original

1852 people have browsed it

The example uses the HTML5 canvas tag and Javascript script to simply write the loading image effect. Please use a browser that supports HTML5 to preview the effect:
The picture below shows the effect of a gradually horizontal grid

html part:

XML/HTML CodeCopy content to clipboard

>
<html lang="en" >
<head>
<meta charset="UTF- 8">
<title>html5 loading image title>
head>
<body>
<button onclick="drawImg1( )">From left to rightbutton>
<button onclick="drawImg2( )">From the center to the left and right sidesbutton>
<button onclick="drawImg3( " > <hr/>
<canvas class
"canvas" id="canvas" width="600" height="300">canvas> body>
html>
JavaScript part: XML/HTML Code

//Initialization
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
image = new Image();
image.src = "img/test.jpg";
//Loading method from left to right
function drawImg1(){
var drawWidth = 0,
interval = setInterval(function(){
context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
drawWidth = 20;
if(drawWidth > canvas.width) clearInterval(interval);
},100);
}
//Open the loading method from the center to the left and right sides
function drawImg2(){
var drawWidth = 0,
drawLeft = canvas.width/2,
interval = setInterval(function(){
context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);
drawWidth = 20;
drawLeft -= 10;
if(drawLeft < 0) clearInterval(interval);
},100);
}
//Gradually horizontal grid loading method
function drawImg3(){
var drawWidth = 0,
spaceWidth = canvas.width/20, //10 refers to the number of divided blocks
interval = setInterval(function(){
for(var i = 0;i<20;i ){
context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height);
}
drawWidth = 5;
if(drawWidth > spaceWidth) clearInterval(interval);
},100);
}

The above content is introduced by the editor to load images in the form of animation in HTML5. I hope it will be helpful to everyone!