Как сделать счетчик используя холст в javascript

Question

Как сделать счетчик используя холст в javascript

0

Я пытаюсь сделать счетчик, чтобы каждый раз, когда вы нажимаете на мышь, он показывает количество кликов на холсте. Но это не обновление холста.

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

Sean W 17 апр. 2014, в 03:33

Источник

Теги:

javascript

html

html5

canvas

2 ответа

0

Ваш код выдает ошибку, 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);
}

juvian 16 апр. 2014, в 22:09

1

Это действительно ресурсоемкий без какой-либо цели. Постоянно работающий requestAnimationFrame сжигает процессор.
Robbie Wxyz 17 апр. 2014, в 01:02
0

Я знаю, но я не был уверен, что счетчик будет единственным, что нужно на холсте. Ваш ответ лучше всего соответствует этому конкретному требованию, хотя
juvian 17 апр. 2014, в 01:25
0

<canvas> можно только стереть и перерисовать. Не редактируется одна вещь за раз (вроде как холст художника). Вы можете рассмотреть возможность использования SVG ?
Robbie Wxyz 17 апр. 2014, в 01:29

Показать ещё 1 комментарий

Ещё вопросы

Это действительно ресурсоемкий без какой-либо цели. Постоянно работающий requestAnimationFrame сжигает процессор.
Я знаю, но я не был уверен, что счетчик будет единственным, что нужно на холсте. Ваш ответ лучше всего соответствует этому конкретному требованию, хотя
<canvas> можно только стереть и перерисовать. Не редактируется одна вещь за раз (вроде как холст художника). Вы можете рассмотреть возможность использования SVG ?

Robbie Wxyz · Accepted Answer · 2014-04-16T23-54-00.000Z

Поэтому я изменил код, чтобы добавить функцию 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.

Вот рабочая демонстрация JSFiddle.