Bien le bonsoir à vous,
Je rencontre un soucis de performance sur une animation canvas. Encore débutant en la matière, j'aimerai savoir comment optimiser l'animation suivante. L'objectif étant de l'afficher sur un écran d'une résolution de 3840*1080. Pensez-vous cela possible (actuellement, ça rame déjà en 1920*1080) ?
Je précise que c'est une application offline. Donc je n'ai pas de contraintes de compatibilité entre navigateurs.
Merci pour votre aide, (et si mon code peut modestement servir à quelqu'un...)
Pour le fichier star.svg (renommer le fichier joint en .svg).
Modifié par Gigipop- (23 Feb 2014 - 20:35)
Je rencontre un soucis de performance sur une animation canvas. Encore débutant en la matière, j'aimerai savoir comment optimiser l'animation suivante. L'objectif étant de l'afficher sur un écran d'une résolution de 3840*1080. Pensez-vous cela possible (actuellement, ça rame déjà en 1920*1080) ?
Je précise que c'est une application offline. Donc je n'ai pas de contraintes de compatibilité entre navigateurs.
Merci pour votre aide, (et si mon code peut modestement servir à quelqu'un...)
Pour le fichier star.svg (renommer le fichier joint en .svg).
<html>
<meta charset="utf8"/>
<head>
<title>CANVAS</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
body {
background-color: #000;
}
</style>
<script type="text/javascript">
var Particules = function() {
this.canvas = null;
this.width = null;
this.height = null;
this.particuleWidth = null;
this.particuleHeight = null;
this.svg = null;
this.canvas = null;
this.ctx = null;
this.particles = null;
this.timeout = null;
}
Particules.prototype = {
init: function init() {
this.canvas = $('canvas')[0];
this.ctx = this.canvas.getContext("2d");
this.width = $(this.canvas).width();
this.height = $(this.canvas).height();
this.svg = new Image();
this.svg.src = 'star.svg';
this.particles = Array();
this.load(this);
},
load: function load(p) {
p.svg.onload = function(){
p.particuleWidth = p.svg.width;
p.particuleHeight = p.svg.height;
p.create(p);
p.timeout = setInterval(function(){p.draw(p)}, 33);
}
},
create: function create(p) {
var n = Math.floor(this.width / this.particuleWidth ) * (Math.floor( this.height / this.particuleHeight ) + 1);
var px = 0;
var py = 0;
for(var i = 0; i < n; i++)
{
var part = new Particule({'x':px, 'y':py});
px += this.particuleWidth;
if(px >= this.width) {
px = 0;
py += this.particuleHeight;
}
this.particles.push(part);
}
},
draw : function draw(p) {
p.ctx.clearRect(0,0,this.width, this.height);
for(var i = 0; i < p.particles.length; i++)
{
var part = p.particles[i];
this.ctx.save();
this.ctx.translate(part.x,part.y);
this.ctx.rotate(part.rotation);
this.ctx.drawImage(this.svg,-this.particuleWidth/2,-this.particuleHeight/2);
this.ctx.restore();
part.rotation += part.v;
}
}
}
var Particule = function(data) {
this.rotation = Math.random()*90;
this.v = Math.random()/10;
this.x = data.x;
this.y = data.y;
}
$(document).ready(function(){
var particules = new Particules();
particules.init();
});
</script>
</head>
<body>
<canvas width="1920" height="1080"></canvas>
</body>
</html>
Modifié par Gigipop- (23 Feb 2014 - 20:35)
