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

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

javascript html canvas

如何在javascript中使用画布制作计数器,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试制作一个计数器，这样每当你点击鼠标时，它就会显示画布中的点击次数。但它并没有更新画布 <!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>

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

<!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>


您的浏览器不支持HTML5画布标记。
点击这里
var animate=setInterval（window.requestAnimationFrame，1）
var=0；
函数function1（）
{
点击++；
document.getElementById（'myCanvas'）。innerHTML=单击；
}; 
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“16px Verdana”；
ctx.fillText（“分数：+点击次数，190,20次）；

您的代码抛出一个错误，

窗口。RequestAnimationFrame

需要回调函数作为参数。此代码适用于：

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);
}

因此，我修改了代码，添加了一个

redraw（）

函数，在画布上重新绘制新的数字

执行

单击+++

后，

increment（）

函数将调用该函数

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的影响

这是一个。

这确实是资源密集型的，没有任何目的。持续运行

requestAnimationFrame

会消耗CPU。我知道，但我不能确定计数器是否是画布上唯一需要的东西。您的答案最符合此特定要求，尽管只能擦除和重新绘制

。一次不编辑一件东西（有点像艺术家的画布）。您可能想考虑使用吗？