html5图片动且平移,Canvas 图像无限自动平移动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var seed = 5625463739;

var random = function() {

var s = seed;

return function() {

return alea(s++)();

};

}();

setTimeout(function() {

var canvasEl = document.getElementById('js-canvas');

var width = canvasEl.width;

var height = canvasEl.height;

var canvasCtx = canvasEl.getContext('2d');

var patternEl = document.createElement('canvas');

var _ref = [width + 32, height];

patternEl.width = _ref[0];

patternEl.height = _ref[1];

var patternCtx = patternEl.getContext('2d');

animate(0, canvasCtx, patternCtx, width, height);

}, 0);

function animate(iteration, ctx, patternCtx, width, height) {

var frequency = 60;

var size = 16;

if (iteration % frequency === 0) {

(function() {

var s = seed + Math.floor(iteration / frequency);

var random = function random() {

return alea(s++)();

};

patternCtx.clearRect(0, 0, width + 16, height);

drawPattern(patternCtx, random, size, width + 16, height);

})();

}

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

var xPos = iteration % frequency / frequency * size;

ctx.drawImage(patternCtx.canvas, xPos, 0, width, height, 0, 0, width, height);

requestAnimationFrame(function() {

animate(iteration + 1, ctx, patternCtx, width, height);

});

}

function drawPattern(ctx, random, size, width, height) {

var radius = size / 2;

var ySteps = Math.floor(height / size);

var xSteps = Math.floor(width / size);

Array.apply(undefined, Array(ySteps)).forEach(function(_y, yIndex) {

var yPos = yIndex * size + radius;

Array.apply(undefined, Array(xSteps)).forEach(function(_x, xIndex) {

var xPos = xIndex * size + radius;

var angle = Math.PI * 0.25 + Math.PI * 0.5 * Math.floor(random() * 2); // + Math.PI / 4;

drawCell(ctx, xPos, yPos, size, angle);

});

});

}

function drawCell(ctx, x, y, size, angle) {

var radius = size / 2 + 3;

ctx.beginPath();

ctx.translate(x, y);

ctx.rotate(angle);

/*

ctx.moveTo(radius, radius);

ctx.lineTo(radius, -radius);

*/

ctx.moveTo(0, radius);

ctx.lineTo(0, -radius);

ctx.rotate(-angle);

ctx.translate(-x, -y);

ctx.lineCap = 'round';

ctx.strokeStyle = '#dedede';

ctx.lineWidth = 2;

ctx.stroke();

ctx.closePath();

}