I'm trying to learn a little more about canvas for games in Html5.
var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 500;//largura da área retangular
var HEIGHT = 200;//altura da área retangular
function Desenhar() {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(x, y, 10, 0, Math.PI*2, true);
ctx.fill();
}
function LimparTela() {
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.rect(0, 0, WIDTH, HEIGHT);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function Iniciar() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(Atualizar, 10);
}
function KeyDown(evt){
switch (evt.keyCode) {
case 38: /*seta para cima */
if (y - dy > 0){
y -= dy;
}
break;
case 40: /*set para baixo*/
if (y + dy < HEIGHT){
y += dy;
}
break;
case 37: /*set para esquerda*/
if (x - dx > 0){
x -= dx;
}
break;
case 39: /*seta para direita*/
if (x + dx < WIDTH){
x += dx;
}
break;
}
}
function Atualizar() {
LimparTela();
Desenhar();
}
window.addEventListener('keydown', KeyDown, true);
Iniciar();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="200">
Se você visualizar esse texto, seu browser não suporta a tag canvas.
</canvas>
</div>
<script type="text/javascript" src="desenhar_circulo.js"></script>
</body>
</html>
I'd like to insert an IMAGE (png) background on the canvas. Since: I tried to use css in index.html, gave black screen by conflict.
<style>
canvas{
background-image: url("fundo.png");
}
</style>
I also tried to draw a background image as if it were the player. It also conflicted.
I believe the problem / solution is in:
ctx.fillStyle = "white";
Any suggestions?