JavaScript使用RequestAnimationFrame定义两个大小和颜色

Question

我希望我的程序创建一个循环，直到它消失。圆圈应在无限循环中执行此操作，同时更改颜色（从启动颜色到结束颜色）。圈子工作正常，但要使颜色效果更改了我的代码，现在它只会这样做几次，同时改变颜色真的很快，然后动画消失了，我不明白为什么。代码未完成，但我需要帮助知道为什么它不能在动画圆圈时更改颜色。以下是最新代码：

<script>
var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext('2d');

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

var angle = 0;
var color='#006699';
//var colorend='#000000';
var steps=100;

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

 function main(){
    var interval = setInterval(function () {

        drawCircle();
            changeColor();
    }, 10);//if i change to a larger value the animation dosen't show
}

function changeColor(){
    var hexc = color.substring(1);
    var decimalc = parseInt(hexc, 16);
    decimalc=decimalc-steps;
    hexc = decimalc.toString(16);
    color= '#'.concat(hexc);
    mainContext.fillStyle = color;
    mainContext.fill();
}


function drawCircle() {
    mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

    // color in the background
    mainContext.fillStyle = "#EEEEEE";
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

    // draw the circle
    mainContext.beginPath();

    var radius = 10 * Math.abs(Math.cos(angle));
    mainContext.arc(225, 225, radius, 0, Math.PI * 2, false);
    mainContext.closePath();

    // color in the circle
    mainContext.fillStyle = color;
    mainContext.fill();

    angle += Math.PI / 40;

    if(radius<=0.1){
        return;//exit animation
    }

    requestAnimationFrame(drawCircle);
}



    main();
</script>

.

Answer 1

您需要通过单独的字节来评估颜色，而不是通过sum

colorRange={
    create: function(a,b){
        var o = Object.create(this);
        o.a = a.split('').slice(1);
        o.b = b.split('').slice(1);
        var i;
        for(i=0 ; i<3 ; ++i){
            o.a[i] = parseInt( o.a[i], 16 );
            o.b[i] = parseInt(o.b[i], 16) - o.a[i];
        }
        return o;
    },
    get: function(f){ // f is 0..1 color factor
       var n=0;
       return "#"+('00'+(
          +((this.a[n] + this.b[n++]*f) >> 0)
          +( ( this.a[n] + this.b[n]*f) << (n++*4) )
          +( ( this.a[n] + this.b[n]*f) << (n*4) )
              ).toString(16)).slice(-3);
    },
};

var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext('2d');

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

var angle = 0;
var steps=100;

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

 function main(){
    q = colorRange.create('#f00', '#00f');
    var x=0;
    var interval = setInterval(function () {

        x += 1/16;
        //drawCircle();
        mainContext.fillStyle = q.get(Math.min(x,1));
        mainContext.arc(50,50, 20, 0,Math.PI*2, 0);
        mainContext.fill();
        changeColor();
    }, 200);//if i change to a larger value the animation dosen't show
}

function changeColor(){
    var hexc = color.substring(1);
    var decimalc = parseInt(hexc, 16);
    decimalc=decimalc-steps;
    hexc = decimalc.toString(16);
    color= '#'.concat(hexc);
    mainContext.fillStyle = color;
    mainContext.fill();
}

main();

.

代码的工作样本 http://jsfiddle.net/b4zuy/1/>

抱歉我的英语