Olá, estou aprendo programação, e já estou em um desafio para conseguir atualizar um desenho feito com a função em cavas, a partir de um arquivo xml, estou tentando com javaScript. Utilizando o mouse ja consegui o efeito desejado, mas quando tento extrair os dados do arquivo xml, os resultados não são os mesmo. Obrigado.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="refresh" content="5"> -->
<title>Teste 6</title>
<script>
function atualiza(){
var largura = 200;
var altura = 200;
var quadro = document.getElementById("quadro");
quadro.setAttribute("width", largura);
quadro.setAttribute("height", altura);
var pincel = quadro.getContext("2d");
pincel.beginPath();
pincel.font="12px Verdana";
pincel.fillStyle="white";
pincel.fillText("Teste 06",60,10);
var desenhando = false;
quadro.onmousedown = function (evt) {
desenhando = true;
pincel.beginPath();
pincel.arc(100,100,50,0,2*Math.PI);
pincel.fillStyle= 'red';
pincel.strokeStyle= '#003300';
pincel.lineWidth= 5;
pincel.fill();
pincel.stroke();
}
quadro.onmouseup = function () {
desenhando = false;
pincel.beginPath();
pincel.arc(100,100,50,0,2*Math.PI);
pincel.fillStyle= 'blue';
pincel.strokeStyle= '#003300';
pincel.lineWidth= 5;
pincel.fill();
pincel.stroke();
}
/* quadro.getElementById = function () {
// document.getElementById("quadro").innerHTML = (getXMLValue(xmlData, 'btn(0)') == 'up') ? desenhando = true; : desenhando = false; {
// window.onload = function (){
if (desenhando) {
pincel.beginPath();
pincel.arc(100,100,50,0,2*Math.PI);
pincel.fillStyle= 'red';
pincel.strokeStyle= '#003300';
pincel.lineWidth= 5;
pincel.fill();
pincel.stroke();
}
if(!desenhando) {
pincel.beginPath();
pincel.arc(100,100,50,0,2*Math.PI);
pincel.fillStyle= 'blue';
pincel.strokeStyle= '#003300';
pincel.lineWidth= 5;
pincel.fill();
pincel.stroke();
}
}
*/
}
window.setInterval("atualiza()", 1000);
</script>
</head>
<body onload="atualiza()"> <!-- background Cor da caixa -->
<div style="background-color: red"> <h1 style="color:white;">Teste 06</h1></div>
<div> <canvas id="quadro" style="background:#363636"></canvas></div>
</body>
</html>
Arquivo xml
<response>
<BTN0>~btn(0)~</BTN0>
</response>