Fatal编程技术网
  • html/
  • Html 为什么这个requestAnmationFrame脚本不起作用？

Html 为什么这个requestAnmationFrame脚本不起作用？

html

Html 为什么这个requestAnmationFrame脚本不起作用？,html,Html,我想用html5制作一个球的动画，我实现了这个小脚本。但是，我看不到任何动画。。我该如何解决这个问题 <html> <head> <meta charset="utf-8"> <script> canvas = document.getElementById("canvas"); window.onload=function(){

我想用html5制作一个球的动画，我实现了这个小脚本。但是，我看不到任何动画。。我该如何解决这个问题

<html>
    <head>
        <meta charset="utf-8">
        <script>
            canvas = document.getElementById("canvas");         
            window.onload=function(){
            if (document.createElement("canvas").getContext){
                //alert("browser supports canvas");
                //console.log(document.getElementById("canvas").getContext);
                canvas = document.getElementById("canvas");
                shape = new shapes();
                shape.drawball(canvas,100,"red");




                }
            };


function shapes(){
    this.drawtriangle = function(canvas){
        triangles = new triangle(0,0,0,200,200,200);
        triangles.draw(canvas.getContext('2d'));    
    }

    this.drawball = function(canvas,radius,color) {
        ball = new Ball(radius,color);
        ball.draw(canvas.getContext('2d'),canvas);
    }
}


function coordinates(x1,y1){
    this.x = x1;
    this.y = y1;
}





function angle(angle,speed){
    this.angle = angle;
    this.speed = speed;
}

function Ball(radius,color){
    this.origin = new coordinates(100,100);
    this.radius = (radius === "undefined" ) ? 40 : radius;
    this.color = (color === "undefined") ? red : color;
    this.rotation = 0;
    this.index  = 0;
    this.angles = new angle(0,0.2);
}

Ball.prototype.draw = function(context,canvas){

    context.fillStyle = this.color;
    context.strokeStyle = "blue";
    context.rotate(this.rotation);
    context.beginPath();
        context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true)
    context.closePath();
    context.fill();
    context.stroke();
    this.animate(context,canvas);
}

Ball.prototype.animate = function(context,canvas){
        if (this.angles.angle < 1){
context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));



    }
}


        </script>
        <style>

            body {
                background-color: #bbb;
                }       
            #canvas {
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="1000px" height="1000px">
            Your browser dows bot suppoet canvas

        </canvas>


    </body>
</html>


canvas=document.getElementById（“canvas”）；
window.onload=function（）{
if（document.createElement（“canvas”）.getContext）{
//警报（“浏览器支持画布”）；
//log（document.getElementById（“canvas”）.getContext）；
canvas=document.getElementById（“canvas”）；
形状=新形状（）；
形状。牵引杆（帆布，100，“红色”）；
}
};
函数形状（）{
this.drawtriangle=函数（画布）{
三角形=新三角形（0,0,02002000）；
triangles.draw（canvas.getContext（'2d'））；
}
this.draull=函数（画布、半径、颜色）{
球=新球（半径、颜色）；
ball.draw（canvas.getContext（'2d'），canvas）；
}
}
函数坐标（x1，y1）{
这是x=x1；
这是y=y1；
}
功能角度（角度、速度）{
这个角度=角度；
速度=速度；
}
功能球（半径、颜色）{
this.origin=新坐标（100100）；
this.radius=（radius==“未定义”）？40：半径；
this.color=（color==“未定义”）？红色：颜色；
这是旋转=0；
该指数=0；
此角度=新角度（0,0.2）；
}
Ball.prototype.draw=函数（上下文、画布）{
context.fillStyle=this.color；
context.strokeStyle=“蓝色”；
context.rotate（这个.rotation）；
context.beginPath（）；
弧（this.origin.x，this.origin.y，this.radius，0，（Math.PI*2），true）
closePath（）；
context.fill（）；
stroke（）；
这个。动画（上下文、画布）；
}
Ball.prototype.animate=函数（上下文、画布）{
如果（此角度小于1）{
clearRect（0,010001000）；
console.log（“设置动画…”）；
this.origin.x=this.origin.x+10；
this.origin.y=this.origin.y+10；
this.angles.angle=this.angles.angle+this.angles.speed；
requestAnimationFrame（this.draw（context））；
}
}
身体{
背景色：#bbb；
}       
#帆布{
背景色：#fff；
}
您的浏览器不支持画布
对
requestAnimationFrame（）
的调用不是传递回调，而是执行函数并传递未定义的返回值。我建议你改变这一点：

Ball.prototype.animate = function(context,canvas) {
    if (this.angles.angle < 1) {
        context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));
    }
}
因为DOM尚未加载，所以它将找不到该对象。只有当DOM已加载时，您才能通过等待表示DOM已加载的事件或在所有DOM元素之后的
部分的每一端运行javascript来执行此操作

然后，第三，您必须使用特定于浏览器的requestAnimationFrame形式，因为每个浏览器可能都有自己的前缀。我使用了以下代码：

var reqestAnimationFrame = 
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame || 
    window.msRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;
当我将脚本放入JSFIDLE并进行上述更改时，我发现动画运行得太快，以至于看不到。您的代码需要向其添加时间元素，以便动画在特定时间段内运行。通常，这是通过定义动画的持续时间来完成的，并且在每个动画步骤中，根据持续时间的百分比缩放动画的位置

下面是一个使用requestAnimationFrame的基于时间的动画示例：

它仍然不工作..下面是控制台中的动画输出。。。未捕获类型错误：对象[Object Window]没有“draw”方法浏览器报告了哪些脚本错误？由于您尚未包含所有代码，我们无法自行运行以进行调试。@VimalBasdeo-我已在回答中添加了更多关于代码错误的注释。@VimalBasdeo-我还添加了一个链接，指向使用requestAnimationFrame和基于时间的动画的工作示例。@VimalBasdeo-这有助于您找出错误所在吗？你愿意投票还是接受答案？ 
canvas = document.getElementById("canvas");  

var reqestAnimationFrame = 
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame || 
    window.msRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;