<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de 1 para -1 para virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de 1 para -1 virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de 1 para -1 para virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de -1 para -1 virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de -1 para virar o sprite em y//
var flipX = 1;//mude o valor de -1 para virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de 1 para -1 virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>
<!DOCTYPE html>
<html>
<head>
<title>teste com canvas</title>
</head>
<body>
<canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>
var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');
var flipY = 1;//mude o valor de -1 para virar o sprite em y//
var flipX = 1;//mude o valor de -1 para virar o sprite em x//
var nave = new Image();
var cores = new Image();
nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);
function draw(){
//56-Largura//
ctx.save();
ctx.scale(flipX,flipY);
ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
ctx.drawImage(nave,0,0,200*flipX,200*flipY);
ctx.restore();
ctx.drawImage(cores,320,0,160,100,400,340,56,100);
requestAnimationFrame(draw);
}
</script>
<style>
#tela{
border:1px solid black;
position:absolute;
left:340px;
top:50px;
</style>