[Resolvido] Canvas + JavaScript

[EHS 0]

Estou começando a utilizar o html5, com ele fiz uma imagem com o elemento CANVAS e agora dentro desse desenho quero colocar uma imagem,

a imagem até aparece dentro do canvas, mas como ele tem uma parte em curva eu queria que a imagem ficasse "cortada"

mas o que está acontecendo é que está ficando por cima do canvas e não dentro dele.

 

window.addEventListener('load', function () {  
   var elemento = document.getElementById('banner');  
   if(elemento.getContext) {  
       var contexto = elemento.getContext('2d');  
       var img = new Image();  
       img.src = 'http://192.168.1.67/www/novoopa/galerias/Desert.jpg';  
       img.onload = function(){  
           //var meuPadrao = contexto.createPattern(img, 'repeat');  
           //contexto.fillStyle = meuPadrao;  
           contexto.drawImage(img,0,5);  
       }  
       contexto.beginPath();  
       contexto.moveTo(0,5);  
       contexto.lineTo(610,7);  
       contexto.quadraticCurveTo(615,8,615,15);  
       contexto.lineTo(615,380);  
       contexto.quadraticCurveTo(620,401,600,395);  
       contexto.quadraticCurveTo(280,361,0,378);  
       contexto.lineTo(0,5);  
       contexto.fill();  
       contexto.closePath();  
   } else {  
       window.alert("Desculpe, seu browser não tem suporte a canvas, por favor instale um navegador descente.");  
   }  
}, false);  

[JCMais 75]

Você precisa usar o metódo clip() para criar uma zona de interseção com os caminhos já criados.

 

Com base no teu código, seria algo como o seguinte:

var context = document.getElementById( 'banner' ).getContext( '2d' ),
   img = new Image();

img.src = 'http://192.168.1.67/www/novoopa/galerias/Desert.jpg';

img.onload = function() {

   context.save();

   context.beginPath();
   context.moveTo( 0, 5 );
   context.lineTo( 610, 7 );
   context.quadraticCurveTo( 615, 8, 615, 15 );
   context.lineTo( 615, 380 );
   context.quadraticCurveTo( 620, 401, 600, 395 );
   context.quadraticCurveTo( 280, 361, 0, 378 );
   context.lineTo( 0, 5 );
   context.closePath();

   context.clip();

   context.drawImage( img, 0, 5 );

   context.restore();

};

 

Ex:

http://jsfiddle.net/JCMais/wbX9Q/

[EHS 0]

Muito obrigado JCMais, funcionou direitinho.

Mas só algumas dúvidas se você puder me responder:

 

1- Para que isso serve:

context.save();
context.clip();
context.restore();

[JCMais 75]

O metódo clip() serve para criar uma área de recorte, ou seja, qualquer coisa renderizada no Canvas, só irá aparecer dentro da área criada, que era o que você queria, aplicar a imagem apenas dentro da área especificada.

 

Já os metódos save() e restore() servem para manipular a pilha de estados do Canvas.

 

Esses estados incluem proprieades como:

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, transformações como translate, rotate e scale, além da área de recorte atual.

 

Eu usei no exemplo que te passei, pq caso você venha à usar o metódo clip() no código executado anteriormente à este que você postou, a nova área de recorte criada não irá afetar a anterior (pois usamos restore no fim do código para restaurar o Canvas para o estado anterior).

 

Você pode ler mais à respeito no site da Mozilla ou na própria especificação:

http://dev.w3.org/html5/2dcontext

https://developer.mozilla.org/en/Canvas_tutorial

[EHS 0]

Valeu pelas dicas e por tirar essas dúvidas.