Question

这是我的演示jsFiddle

HTML

<canvas id="random"></canvas>

的jQuery

function Random() {
    var length = 9,
        charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    return retVal;
}
var ctx = document.getElementById("random").getContext('2d');
ctx.font = "30px Codystar";
ctx.fillText(Random(), 30, 30);
$("#random").click(function () {
    ctx.fillText(Random(), 30, 30);
});

我的问题1 - 字体在第一次启动时不起作用，双击功能不起作用？

Answer 1

在再次写入画布之前，您似乎必须使用函数clearRect(x,y, w, h);来清除画布。

类似的东西：

$("#random").click(function () {
    ctx.clearRect ( 0,0,1000,1000 );
    ctx.fillText(Random(), 30, 30);
});

生活演示：http://jsfiddle.net/vEEPS/3/

Answer 2

我经历了以下link

发现它可以帮助您理解画布上的点击功能。

如何使用单击功能更改画布？

2 个答案: