我需要使用画布对图像进行一些动画转换。
简单演示在我的小提琴中,它只是一个画布,充满了图案并使用requestAnimationFrame旋转。
它在Chrome中运行完美,但在Firefox中它会变慢,因为这似乎是一项相当简单的任务。它在FF中有6-8 fps而在Chrome中有50-60 fps。
Firefox 38.0.5,Mac OS X 10.10
示范:http://jsfiddle.net/jyoggnjr/
context.fillStyle = context.createPattern(image, 'repeat');
update = function() {
var date, offsetRotation;
date = new Date();
offsetRotation = ((Math.round(date / 10)) % 1000) / 1000 * (Math.PI * 2) - Math.PI;
context.save();
context.translate(radius, radius);
context.beginPath();
context.arc(0, 0, radius * 2, Math.PI, -Math.PI);
context.closePath();
context.rotate(offsetRotation);
context.fill();
context.restore();
requestAnimationFrame(update);
}
感谢任何帮助。