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 - 64
Tutorial para Criar uma Máscara em uma Imagem

Neste tutorial veremos como criar uma máscara com uma imagem por baixo. A imagem só é vista através de um círculo arrastado pelo mouse.
Vejamos então o exemplo:
Nesse exemplo você poderá alterar a imagem e o seu tamanho, desde que seja colocada na mesma pasta do arquivo HTML. Também é possível´alterar o tamanho do círculo. Para esse exemplo vamos utilizar apenas um arquivo HTML:
Arquivo mascaraImagem.html:
<!DOCTYPE html> <html lang='en'> <head> <title>Máscara sobre Imagem</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <script src='/google_analytics_auto.js'></script></head> <body> <h2>Máscara sobre Imagem</h2> <canvas id="canvas1" width="450" height="450"></canvas> <script type='text/javascript'> var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); can.addEventListener('mousemove', function(e) { var mouse = getMouse(e, can); redraw(mouse); }, false); function redraw(mouse) { console.log('a'); can.width = can.width; ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.rect(0,0,450,450); ctx.arc(mouse.x, mouse.y, 50, 0, Math.PI*2, true) ctx.clip(); ctx.fillRect(0,0,450,450); } var img = new Image(); img.onload = function() { redraw({x: -500, y: -500}) } img.src = 'frutas.png'; function getMouse(e, canvas) { var element = canvas, offsetX = 0, offsetY = 0, mx, my; // Calcula o deslocamento total. É possível armazenar isso em cache, se desejar. if (element.offsetParent !== undefined) { do { offsetX += element.offsetLeft; offsetY += element.offsetTop; } while ((element = element.offsetParent)); } mx = e.pageX - offsetX; my = e.pageY - offsetY; // Retornamos um objeto javascript simples com x e y definidos. return { x: mx, y: my }; } </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar Triângulos Animados Aleatoriamente
Tutorial para Criar um Painel para Gerar Cores Gradientes >>

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