Question

最近我正在画布上进行动画制作。动画是创建一个基本的渐变圆，并将外圆从一侧移动到另一侧。所以它看起来像搜索灯效果。

Html代码是

<canvas id="intro-canvas"></canvas>

javascript部分是：

var canvas = document.getElementById("intro-canvas");
var ctx = canvas.getContext("2d");
canvas.width = $window_w;
canvas.height = $window_h;
var $start = 0;
var $frames = 120;

function intro() {
    (function animloop() {
        $start++;
        if ($start <= $frames) {
            $canvas_timer = requestAnimFrame(animloop);
            render_canvas();
        }
    })();
}

var $xmin = (window.innerWidth - 635) / 2;
var $xmax = $xmin + 635;
var $ymin = (window.innerHeight - 300) / 2;
var $ymax = $ymin + 300;
var centerx = randomIntFromInterval($xmin, $xmax);
var centery = randomIntFromInterval($ymin, $ymax);


var center_disx = randomIntFromInterval(450, 500);
var center_disy = randomIntFromInterval(450, 500);
var xstep = (center_disx + center_disx - 280) / 120;
var ystep = (center_disy  + center_disy - 280) / 120;

if (centerx > window.innerWidth / 2) {
    var centerx2 = centerx + center_disx;
} else {
    var centerx2 = centerx - center_disx;
}

if (centery > window.innerHeight / 2) {
    var centery2 = centery + center_disy;
} else {
    var centery2 = centery - center_disy;
}

var $r1 = randomIntFromInterval(150, 200);
var $r2 = $r1 + randomIntFromInterval(700, 750);

function render_canvas() {
    ctx.clearRect(0, 0, $window_w, $window_h);
    var grd = ctx.createRadialGradient(centerx, centery, $r1, centerx2, centery2, $r2);
    $r2 -= 2;


    if (centerx > window.innerWidth / 2) {
        centerx2 -= (xstep);
    } else {
        centerx2 += (xstep);
    }

    if (centery > window.innerHeight / 2) {
        centery2 -= (ystep);
    } else {
        centery2 += (ystep);
    }

    grd.addColorStop(0, "#531f69");
    grd.addColorStop(0.5, "#8e217d");
    grd.addColorStop(1, "#ffffff");

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, $window_w, $window_h);
}

function render_last_canvas() {
    $('#intro > img').animate({
        opacity : 1
    }, 2000);
}

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

现在代码在chrome中运行良好但是当涉及到safari时，动画变得非常慢。有没有人知道在野生动物园上画布激进渐变动画的表现？

有趣的是jsfiddle：http://jsfiddle.net/lhray/qVLps/，它运作正常。

感谢您的任何想法。顺便说一句，我的safari是7.0.4，OS是OS X 10.9.3

画布渲染动画在safari上慢

0 个答案: