fillStyle停止更改顏色

Question

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8' />
    <title>Game 1</title>
</head>
<body>
    <canvas id ='myCanvas' height="400" width="600"></canvas>
    <div id='pos'>Pos:x,y</div>
    <div id='number'>00</div>
    <input  type='button' id='btn' value='Clear' OnClick="clearB()" class='button' />
</body>
</html>
<script type='text/javascript'>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    Balls = [];
    colors = ['#00000','#FD0006'];


        canvas.addEventListener("mousemove",click,false);
        function click(event){
            var i;
            document.getElementById('pos').innerHTML = 'x:' +event.pageX + ' y:'+event.pageY; 
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for(var i=0;i<Balls.length;i++){ 
                difx = Balls[i].x - event.pageX; 
                dify = Balls[i].y - event.pageY;
                dist = Math.sqrt(difx*difx + dify*dify);

                if(dist  <  Balls[i].r ){
                    document.getElementById('number').innerHTML = 'n:' + i;
                    Balls[i].c = colors[1];
                    Balls[i].draw();
                }else{
                    Balls[i].c = colors[0];
                    Balls[i].draw();

                }

            }
        }


        /* declarando estrutura */
        Ball = function(){
            this.x = 0;
            this.y = 0;
            this.r = 0;
        };
        Ball.pt = Ball.prototype;
        /* func para iniciar valores */ 
        Ball.pt.init = function(px,py){
            this.x = px;
            this.y = py;
            this.r = 20;
            this.c = colors[0];
        }
        Ball.pt.draw = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fillStyle = this.c;
            ctx.fill();
        }
        function create(color){
            for(var i= 0;i < 10;i++){
                for(var j=0;j<30;j++){
                    b = new Ball();
                    b.init(20+j*40,20+i*40);
                    b.draw();
                    Balls.push(b);

                }
            }
        }
        function clearB(){
            for(var i=0;i<Balls.length;i++)
                Balls.pop();
            create();
        }

        create(); 


</script>

大家好，請幫幫我！ 在我設置Balls [i] .c = colors [1]之后，ctx.fillStyle不再更改顏色，我真的不知道為什么..代碼沒有錯，因為我可以隨時更改顏色，但是當mousemove偵聽器已激活，我無法更改顏色，所以我認為問題出在mousemove事件中。

Answer 1

我不確定您要上面的代碼做什么，但是，您的基本問題是顏色初始化：

黑色缺少顏色值中的字符：

colors = ['#00000','#FD0006'];

應該：

colors = ['#000000', '#FD0006'];

演示小提琴

fillStyle停止更改顏色

問題描述

1 個解決方案

解決方案1
0 已采納 2013-09-13 23:40:08

fillStyle停止更改顏色

問題描述

1 個解決方案

解決方案1 0 已采納 2013-09-13 23:40:08

解決方案1
0 已采納 2013-09-13 23:40:08