Skip to main content
adicionou 5 caracteres ao conteúdo
Fonte Link

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

adicionou 9 caracteres ao conteúdo
Fonte Link

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

Fonte Link

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