HTML5 Canvas + JS не работает на IOS/Safari ⇐ Jquery

[Гость]

Я реализовал элемент холста с эффектом частиц JavaScript. Эффект работает во всех браузерах, кроме IOS/Safari. Я провел небольшое исследование и обнаружил, что IOS/Safari поддерживает HTML5/Canvas: согласно таблицам поддержки браузерами HTML5/Canvas

< br />

Код: Выделить всё

$(function() {
var WIDTH = window.innerWidth * .9,
HEIGHT = window.innerHeight,
MAX_PARTICLES = 100,
DRAW_INTERVAL = 60,
canvas = document.querySelector('#pixies'),
context = canvas.getContext('2d'),
gradient = null,
pixies = new Array();

function setDimensions() {
WIDTH = window.outerWidth;
HEIGHT = window.innerHeight;
canvas.width = WIDTH;
canvas.height = HEIGHT;
}

setDimensions();
window.addEventListener('resize', setDimensions);

function Circle() {
this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};

this.reset = function() {
this.x = (this.settings.random ? WIDTH*Math.random() : this.settings.xdef);
this.y = (this.settings.random ? HEIGHT*Math.random() : this.settings.ydef);
this.r = ((this.settings.rmax-1)*Math.random()) + 1;
this.dx = (Math.random()*this.settings.xmax) * (Math.random() < .5 ? -1 : 1);
this.dy = (Math.random()*this.settings.ymax) * (Math.random() < .5 ? -1 : 1);
this.hl = (this.settings.ttl/DRAW_INTERVAL)*(this.r/this.settings.rmax);
this.rt = Math.random()*this.hl;
this.settings.rt = Math.random()+1;
this.stop = Math.random()*.2+.4;
this.settings.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
this.settings.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
}

this.fade = function() {
this.rt += this.settings.rt;
}

this.draw = function() {
if(this.settings.blink && (this.rt = this.hl)) {
this.settings.rt = this.settings.rt*-1;
} else if(this.rt >= this.hl) {
this.reset();
}

var newo = 1-(this.rt/this.hl);
context.beginPath();
context.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
context.closePath();

var cr = this.r*newo;
gradient = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr  WIDTH || this.x < 0) this.dx *= -1;
if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
}

this.getX = function() { return this.x; }
this.getY = function() { return this.y; }
}

for (var i = 0; i < MAX_PARTICLES; i++) {
pixies.push(new Circle());
pixies[i].reset();
}

function draw() {
context.clearRect(0, 0, WIDTH, HEIGHT);
for(var i = 0; i < pixies.length; i++) {
pixies[i].fade();
pixies[i].move();
pixies[i].draw();
}
}

setInterval(draw, DRAW_INTERVAL);
});

Код: Выделить всё

#particles {
position: absolute;
background: navy;
width: 200px;
height: 200px;
}

Код: Выделить всё

Any ideas why this isn't working in IOS/Safari? The actual site in question is this one: www.pjmaskslive.com


Источник: https://stackoverflow.com/questions/439 ... ios-safari