Question

我正在使用画布制作一些绘制的圆圈动画。不幸的是，这在IE9中不起作用，我已经使用了modernizr和html5shiv。所以我在查看F12模式，发现我的脚本中有错误，我不知道如何解决它。它说：SCRIPT5007：预期的对象。

这是我的javascript代码：

$('document').ready(function(){
    var wHeight = $(window).height();
    $('.page').css('height',wHeight);



//SKILLS
$('.orange').waypoint(function() {

    function drawSkill(canvasName,fillPercentage,color,text){
    // requestAnimationFrame Shim
    (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame;
    })();


     var canvas = document.getElementById(canvasName);
     var context = canvas.getContext('2d');
     var x = canvas.width / 2;
     var y = canvas.height / 2;
     var radius = 75;
     var endPercent = fillPercentage;
     var curPerc = 0;
     var counterClockwise = false;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;

     context.lineWidth = 20;
     context.strokeStyle = color;
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;
     context.shadowBlur = 10;
     context.shadowColor = '#656565';    

     animate();

     function animate(current) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         context.font = "bold 24px Arial";
         context.fillStyle = 'white';
         context.textAlign = 'center';
         context.fillText(text, 125, 135);
         if (curPerc < endPercent) {
             requestAnimationFrame(function () {
                 animate(curPerc / 100)
             });
         }           
         $('.orange').waypoint('disable');
     }
    }

     drawSkill('html',95,'#ccc','HTML');
     drawSkill('design',85,'#ccc','Design');
     drawSkill('css',95,'#ccc','CSS');
     drawSkill('php',85,'#ccc','PHP');
     drawSkill('mysql',75,'#ccc','MySQL');
     drawSkill('jQuery',70,'#ccc','jQuery');

});


})

它说错误在48行6字符。所以这就是这行代码：

requestAnimationFrame(function () {

有人能帮助我吗？

这也是HTML代码：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>CV</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.min.css">        
    <link rel="stylesheet" href="css/main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

    <section class="page green">
        <section class="center">
            <h1>Curriculum Vitae</h1>
        </section>
    </section>
    <section class="page yellow">
    </section>
    <section class="page orange">
        <section id="skills" class="center">
            <h1>Vaardigheden</h1>
            <p></p>
            <canvas id="design" width="250" height="250">
            </canvas>
            <canvas id="html" width="250" height="250">
            </canvas>
            <canvas id="css" width="250" height="250">
            </canvas>
            <canvas id="php" width="250" height="250">
            </canvas>
            <canvas id="mysql" width="250" height="250">
            </canvas>
            <canvas id="jQuery" width="250" height="250">
            </canvas>
        </section>
    </section>
    <section class="page red">
    </section>

    <script type="text/javascript"
     src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script type="text/javascript"
     src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/waypoints/waypoints.min.js"></script>

    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>

Answer 1

如果requestAnimationFrame不存在，您需要具备回退功能。你当前的垫片不会这样做。

替换它：

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || 
      window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || 
      window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

有了这个：

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame     ||
        window.webkitRequestAnimationFrame  ||
        window.mozRequestAnimationFrame     ||
        window.msRequestAnimationFrame      ||
        function( callback ) { return window.setTimeout( callback, 0); };
})();

window.cancelAnimationFrame = (function() {
    return window.cancelAnimationFrame      ||
        window.webkitCancelAnimationFrame   ||
        window.mozCancelAnimationFrame      ||
        window.msCancelAnimationFrame       ||
        function( intervalKey ) { window.clearTimeout( intervalKey ); };
})();

SCRIPT5007：Canvas HTML5上IE9中的预期对象

1 个答案: