Question

我正在尝试制作一个计数器，这样每次点击鼠标时都会显示画布中的点击次数。但它没有更新画布。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<button onclick="function1()">Click Here</button>

<script>
var animate = setInterval(window.requestAnimationFrame,1)

var clicks = 0;
        function function1()
        {
        clicks++;
        document.getElementById('myCanvas').innerHTML = clicks;
        }; 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="16px Verdana";
ctx.fillText("Score: " + clicks,190,20);
</script>
</body>
</html>

Answer 1

所以我更改了代码以添加redraw()函数来在画布上重新绘制新数字。

increment()函数会在执行clicks++后调用该函数。

var clicks = 0;
function increment(){
    clicks++;
    redraw();
};
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
console.log(ctx);
function redraw(){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.font="16px Verdana";
    ctx.fillText("Score: " + clicks,190,20);
}
redraw();

你不能只使用innerHTML作为画布，因为它实际上只是一个用于绘画的表面，因此它不受其内部DOM的影响。

这是working JSFiddle demo。

Answer 2

您的代码抛出错误，window.requestAnimaitonFrame需要回调函数作为参数。此代码有效：

var animate = setInterval(function(){update()},1)

var clicks = 0;
    function function1()
    {
    clicks++;
    }; 
function update(){

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height);
    ctx.font="16px Verdana";
    ctx.fillText("Score: " + clicks,190,20);
}

如何在javascript中使用画布制作计数器

2 个答案: