Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 61
Tutorial para Rotacionar uma Imagem usando Botões

Neste tutorial veremos como girar uma imagem tanto para a direita quanto para a esquerda utilizando dois botões.
Vejamos então o exemplo:
Nesse exemplo você terá que usar uma imagem qualquer e colocá-la no mesmo diretório do arquivo HTML. Para esse exemplo vamos utilizar apenas um arquivo HTML:
Arquivo rotacionarImagem.html:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Como Rotacionar uma Imagem</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <style id="compiled-css" type="text/css"> body{ background-color: ivory; } canvas{border:1px solid red; background:red;border-radius:50%;} </style> <script src='/google_analytics_auto.js'></script></head> <body> <h2>Como Rotacionar uma Imagem</h2> <canvas id="canvas"></canvas><br> <button id="clockwise">Sentido Horário</button> <button id="counterclockwise">Sentido Anti-Horário</button> <script type='text/javascript'> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var width=0; var height=0; var diagonal = 0; var angleInDegrees=0; var image=document.createElement("img"); image.onload=function(){ width = image.naturalWidth; height = image.naturalHeight; diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2)); ctx.canvas.height = diagonal; ctx.canvas.width = diagonal; ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); ctx.translate(diagonal/2,diagonal/2); ctx.rotate(0*Math.PI/180); ctx.drawImage(image,-width/2,-height/2); ctx.restore(); } image.src="coco.png"; $("#clockwise").click(function(){ angleInDegrees+=45; drawRotated(angleInDegrees); }); $("#counterclockwise").click(function(){ angleInDegrees-=45; drawRotated(angleInDegrees); }); function drawRotated(degrees){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); ctx.translate(diagonal/2,diagonal/2); ctx.rotate(degrees*Math.PI/180); ctx.drawImage(image,-width/2,-height/2); ctx.restore(); } </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar o Jogo Pedra, Papel e Tesoura
Tutorial para Desenhar à Mão Livre >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino