html5 制作加载图标,html5中制作loading图标和图片预览代码详解(示例代码)

html5制作loading图的示例

代码如下:

var Loading = function (canvas, options) {

this.canvas = document.getElementById(canvas);

this.options = options;

};

Loading.prototype = {

constructor: Loading,

show: function () {

var canvas = this.canvas,

begin = this.options.begin,

old = this.options.old,

lineWidth = this.options.lineWidth,

canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},

ctx = canvas.getContext("2d"),

color = this.options.color,

num = this.options.num,

angle = 0,

lineCap = this.options.lineCap,

CONST_PI = Math.PI * (360 / num) / 180;

window.timer = setInterval(function () {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < num; i += 1) {

ctx.beginPath();

ctx.strokeStyle = color[num - 1 - i];

ctx.lineWidth = lineWidth;

ctx.lineCap= lineCap;

ctx.moveTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * begin, canvasCenter.y + Math.sin(CONST_PI * i + angle) * begin);

ctx.lineTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * old, canvasCenter.y + Math.sin(CONST_PI * i + angle) * old);

ctx.stroke();

ctx.closePath();

}

angle += CONST_PI;

console.log(angle)

},50);

},

hide: function () {

clearInterval(window.timer);

}

};

(function () {

var options = {

num : 8,

begin: 20,

old: 40,

lineWidth: 10,

lineCap: "round",

color: ["rgb(0, 0, 0)", "rgb(20, 20, 20)","rgb(40, 40, 40)", "rgb(60, 60, 60)","rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"]

};

var loading = new Loading("canvas", options);

loading.show();

}());

效果图：

html5图片上传预览示例分享

代码如下:

HTML5 图片上传预览

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">>

$(function(){

$(‘#img‘).change(function(){

var file = this.files[0]; //选择上传的文件

var r = new FileReader();

r.readAsDataURL(file); //Base64

$(r).load(function(){

$(‘div‘).html(‘‘);

});

});

});

HTML5 图片上传预览