마스크 된 캔버스 이미지에 CSS 효과를 추가 할 수 있습니까?

캔버스 요소로 이미지 마스킹을 수행 한 경우 마스크에 CSS를 적용하고 홀 캔버스가 아닌 자체 어떻게 적용 할 수 있습니까? 그것은 가능하지 않습니까?마스크 된 캔버스 이미지에 CSS 효과를 추가 할 수 있습니까?

삼각형 모양의 이미지로 포트폴리오를 만들려고합니다. 이미지 위로 마우스를 가져 가면 삼각형의 아래쪽 선을 따라 약간의 텍스트가 표시되도록 약간 색이 지정된 필드가 필요합니다. 삼각형 모양을 얻으려면 canvas 요소로 이미지 마스킹을 수행했습니다. 그래서 내 질문에 삼각형 모양의 마스크에 CSS를 적용하는 방법입니까? 홀 캔버스에 적용 할 수 있도록 만 만들 수 있지만 이미지가 삼각형이므로 사진과 같이 마스크 바깥 부분을 잘라내야합니다.

HTML :

<body> 
    <h3>Masks</h2> 

    <ul id="portfolio"> 
    <li><canvas id="canvas01" width="400" height="330"><img src="canvas01.png" id="image01" class="image" alt="" /></canvas><div>First</div></li> 
    <li><canvas id="canvas02" width="400" height="330"><img src="canvas02.png" id="image02" class="image" alt="" />Second</canvas></li> 
    <li><canvas id="canvas03" width="400" height="330"><img src="canvas03.png" id="image03" class="image" alt="" />Third</canvas></li> 
    </ul> 

    </body>

자바 스크립트 :

저는 초보자 너무 미안 해요 듭니다 경우 바보 같은 질문 : 여기

지금까지 내 코드입니다

function masks() { 
      var canvas01 = document.getElementById("canvas01"); 
      if (canvas01.getContext) { 
       var ctx = canvas01.getContext("2d"); 
       //Load the image. 
       var img = document.getElementById("image01"); 
       ctx.fillStyle = "#f30"; 
       ctx.beginPath(); 
       ctx.moveTo(canvas01.width/2, 0); 
       ctx.lineTo(canvas01.width, canvas01.height);    
       ctx.lineTo(0, canvas01.height); 
       ctx.closePath();           
       ctx.clip();       
       ctx.drawImage(img,0,0); 
      } 
      var canvas02 = document.getElementById("canvas02"); 
      if (canvas02.getContext) { 
       var ctx = canvas02.getContext("2d"); 
       //Load the image. 
       var img = document.getElementById("image02"); 
       ctx.fillStyle = "#f30"; 
       ctx.beginPath(); 
       ctx.moveTo(canvas02.width/2, 0); 
       ctx.lineTo(canvas02.width, canvas02.height);    
       ctx.lineTo(0, canvas02.height); 
       ctx.closePath();           
       ctx.clip();       
       ctx.drawImage(img,0,0); 
      } 
      var canvas03 = document.getElementById("canvas03"); 
      if (canvas03.getContext) { 
       var ctx = canvas03.getContext("2d"); 
       //Load the image. 
       var img = document.getElementById("image03"); 
       ctx.fillStyle = "#f30"; 
       ctx.beginPath(); 
       ctx.moveTo(canvas03.width/2, 0); 
       ctx.lineTo(canvas03.width, canvas03.height);    
       ctx.lineTo(0, canvas03.height); 
       ctx.closePath();           
       ctx.clip();       
       ctx.drawImage(img,0,0); 
      } 
     };

출처

2013-08-30 Lisa

캔버스의 마스크에 CSS를 적용 할 수 없습니다.

삼각형은 조작 할 수있는 DOM 개체가 아닙니다.

삼각형은 캔버스에 그려진 픽셀의 무리입니다.

당신이 그리려는 캔버스의 컨텍스트를 :

그러나 캔버스는 3 개 표시된 삼각형 이미지

재사용 가능한 기능은 아래에서 소요를 그리기 가능하다
그리려는 이미지 개체 + 클립
삼각형의 하단에 그려야 할 텍스트

텍스트를 입력하면 하단 빨간색 막대와 텍스트가 그려집니다.

텍스트를 제공하지 않으면 막대와 텍스트가 그려지지 않습니다.

따라서 마우스를 움직일 때 텍스트를 표시하거나 숨길 수 있습니다. http://jsfiddle.net/m1erickson/S9vS8/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     draw(ctx,img,"Hello!"); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg"; 


    function draw(ctx,img,text){ 
     ctx.beginPath(); 
     ctx.moveTo(canvas.width/2, 0); 
     ctx.lineTo(canvas.width, canvas.height);    
     ctx.lineTo(0, canvas.height); 
     ctx.closePath();           
     ctx.clip();       
     ctx.drawImage(img,0,0); 
     if(text){ 
      ctx.fillStyle = "#f30"; 
      ctx.fillRect(0,canvas.height-20,canvas.width,20); 
      ctx.fillStyle = "black"; 
      ctx.font="14pt Verdana"; 
      var textWidth=ctx.measureText(text).width; 
      ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
     } 


    } 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

[다음 코드의 JQuery와없는]

: 여기

은 삼각형

function draw(ctx,img,text){ 
     ctx.beginPath(); 
     ctx.moveTo(canvas.width/2, 0); 
     ctx.lineTo(canvas.width, canvas.height);    
     ctx.lineTo(0, canvas.height); 
     ctx.closePath();           
     ctx.clip();       
     ctx.drawImage(img,0,0); 
     if(text){ 
      ctx.fillStyle = "#f30"; 
      ctx.fillRect(0,canvas.height-20,canvas.width,20); 
      ctx.fillStyle = "black"; 
      ctx.font="14pt Verdana"; 
      var textWidth=ctx.measureText(text).width; 
      ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
     } 


    }

다음 코드 그리고 바이올린의 3을 그릴 것 하나 개의 기능에 대한 코드입니다

<!doctype html> 
<html> 
<head> 
<style> 
    body{ background-color: ivory; padding:10px; } 
    #canvas{border:1px solid lightgray;} 
</style> 

<script> 
window.onload=function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     draw(ctx,img,"Hello!"); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg"; 


    function draw(ctx,img,text){ 
     ctx.beginPath(); 
     ctx.moveTo(canvas.width/2, 0); 
     ctx.lineTo(canvas.width, canvas.height);    
     ctx.lineTo(0, canvas.height); 
     ctx.closePath();           
     ctx.clip();       
     ctx.drawImage(img,0,0); 
     if(text){ 
      ctx.fillStyle = "#f30"; 
      ctx.fillRect(0,canvas.height-20,canvas.width,20); 
      ctx.fillStyle = "black"; 
      ctx.font="14pt Verdana"; 
      var textWidth=ctx.measureText(text).width; 
      ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
     } 
    } 

}; // end window.onload 


</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

출처

2013-08-30 16:23:36 markE

도움을 주셔서 감사합니다. 너 무슨 뜻인지 알 겠어!비록 Javery가 아니라 Javery가 될 필요가 있지만 :(당신은 Javascript로 그것을 만드는 방법을 알고 있습니까? – Lisa

Jad없이 JS로 가려면 jquery $ (function() {})를 javascript로 대체하십시오. 네이티브 window.onload = function() {}. 내 대답의 아래쪽에 순수 자바 스크립트 코드를 추가했습니다. – markE

이 도움에 감사드립니다. – Lisa

마스크 된 캔버스 이미지에 CSS 효과를 추가 할 수 있습니까?

답변

관련 문제