点击图片图片聚焦html,HTML5 Canvas 弹性的图像聚焦圆圈

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

~ function() {

'use strict';

var objects = [],

image,

ctx,

nx,

ny,

init = function() {

var CObj = function(l, t) {

this.img = image;

this.width = image.width;

this.height = image.height;

this.left = l;

this.top = t;

this.a = 0;

this.p = 0;

};

CObj.prototype.anim = function() {

var dx = pointer.x - this.left,

dy = pointer.y - this.top,

d = 30000 / (25 + Math.sqrt(dx * dx + dy * dy));

this.p += (this.a += ((d - this.p - this.a)) * 0.002);

d = this.p > 0 ? this.p : 0;

ctx.save();

ctx.beginPath();

ctx.fillStyle = '#000';

ctx.arc(this.left, this.top, d * 0.5, 0, 2 * Math.PI);

ctx.fill();

ctx.clip();

ctx.drawImage(this.img, this.left - this.width * 0.5, this.top - this.height * 0.5);

ctx.restore();

};

nx = Math.round(canvas.width / 150);

ny = Math.round(canvas.height / 150);

pointer.x = canvas.width / 2;

pointer.y = canvas.height / 2;

objects.length = 0;

var u = canvas.height - (canvas.height / ny) / 2;

for (var i = 0; i < ny; i++) {

var g = (canvas.width / nx) / 2;

for (var j = 0; j < nx; j++) {

objects.push(

new CObj(

g,

u

)

);

g += canvas.width / nx;

}

u -= canvas.height / ny;

}

},

run = function() {

requestAnimationFrame(run);

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

for (var i = 0; i < nx * ny; i++) {

objects[i].anim();

}

},

canvas = {

elem: document.createElement('canvas'),

resize: function() {

this.width = this.elem.width = this.elem.offsetWidth;

this.height = this.elem.height = this.elem.offsetHeight;

init();

},

init: function() {

var ctx = this.elem.getContext('2d');

document.body.appendChild(this.elem);

window.addEventListener('resize', this.resize.bind(this), false);

this.resize();

return ctx;

}

},

pointer = (function(canvas) {

var pointer = {

pointer: function(e) {

var touchMode = e.targetTouches,

pointer;

if (touchMode) {

e.preventDefault();

pointer = touchMode[0];

} else pointer = e;

this.x = pointer.clientX;

this.y = pointer.clientY;

}

};

window.addEventListener('mousemove', function(e) {

this.pointer(e);

}.bind(pointer), false);

canvas.elem.addEventListener('touchmove', function(e) {

this.pointer(e);

}.bind(pointer), false);

return pointer;

}(canvas)),

load = (function() {

image = new Image();

image.onload = function() {

ctx = canvas.init();

run();

};

image.src = '/uploads/151001/4.gif';

}());

if (window.SpeechSynthesisUtterance) {

var message = new SpeechSynthesisUtterance();

message.lang = "en-GB";

message.pitch = 0.1;

message.rate = 0.6;

message.text = "We are watching you from everywhere!";

window.speechSynthesis.speak(message);

}

}();