Question

我有两个循环在画布上创建了许多圆圈。使用计时器和doTinyCircles功能，我使圆圈闪烁不同的颜色。我想让它显示为on-load，并且在单击画布时，我希望通过我创建的randomColor（）方法更改背景颜色。我对画布方法感到困惑。我已经尝试过使用fillStyle，然后使用strokeStyle，但我一直在看透视背景。

var CANVAS;
var CONTEXT;
var TIMER;

function myTimer() {
    TIMER = setInterval("doTinyCircles();", 30);
}

window.onload = function() {
    CANVAS = document.getElementById("canvas");
    CONTEXT = CANVAS.getContext("2d");
    CONTEXT.strokeRect(0, 0, CANVAS.width, CANVAS.height);
    CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height);
    CONTEXT.fillStyle = randomColor();
    CONTEXT.translate(32, 32);
    myTimer();
    document.getElementById("canvas").onclick = myTimer();
}

function doTinyCircles() {
CONTEXT.fillStyle = randomColor();
    for (var i = 1; i < 12; i++){
        for (var j = 0 ; j < i*1; j++){
        CONTEXT.fillStyle = randomColor();
        CONTEXT.rotate(Math.PI*2/(i*6));
        CONTEXT.beginPath();
        CONTEXT.arc(0,i*5,1.5,0,Math.PI*2,true);
        CONTEXT.fill();
        }
    }
}

Answer 1

您需要实际声明randomColor功能并使doTinyCircles功能可以访问myTimer。

var CANVAS;
var CONTEXT;
var TIMER;

function myTimer() {
    TIMER = setInterval("doTinyCircles();", 30);
}

CANVAS = document.getElementById("canvas");
CONTEXT = CANVAS.getContext("2d");    CONTEXT.strokeRect(0, 0, CANVAS.width, CANVAS.height);
CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height);
CONTEXT.fillStyle = "rgb(255, 0, 0)";
CONTEXT.translate(32, 32);

myTimer();
    document.getElementById("canvas").onclick = myTimer();

//need to set doTinyCircles to a variable, otherwise
//myTimer won't be able to run it.
doTinyCircles = function doTinyCircles() {
    for (var i = 1; i < 12; i++){
            for (var j = 0 ; j < i*1; j++){
                CONTEXT.fillStyle = randomColor();
                CONTEXT.rotate(Math.PI*2/(i*6));
                CONTEXT.beginPath();
                        CONTEXT.arc(0,i*5,1.5,0,Math.PI*2,true);
                CONTEXT.fill();
            }
    }
}

randomColor = function randomColor() {
    var red = Math.floor(Math.random() * 255);
    var green = Math.floor(Math.random() * 255);
    var blue = Math.floor(Math.random() * 255);
    return "rgb(" + red + "," + green + "," + blue + ")";
}

Answer 2

fillRect是一个函数，您试图像属性一样访问它。

CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height);

应该是

CONTEXT.fillRect(0, 0, CANVAS.width, CANVAS.height);

虽然我仍然认为只是更改背景颜色可能会遇到问题（因为您正在更改绘图开始位置并执行圆弧）。
也许在画布后面的div作为背景颜色会更好。

此外，这是一个很好的随机十六进制颜色函数。

function randomColor() {
    return '#'+Math.floor(Math.random()*16777215).toString(16);
}

编辑：
这是一个使用背景div作为背景颜色的 http://jsfiddle.net/725aD/1/

更改画布onclick的背景

2 个答案: