javascript - マスクされたキャンバス画像に CSS 効果を追加できますか?

Question

canvas 要素でイメージマスキングを行った場合、CSS をホールキャンバスではなくマスク自体に適用するにはどうすればよいですか? それは不可能ですか？

三角形の画像でポートフォリオを作ろうとしています。画像にカーソルを合わせると、小さな色付きのフィールドに三角形の一番下の線に沿ってテキストが表示されます。三角形の形状を取得するために、キャンバス要素で画像マスキングを行いました。私の質問は、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>

Javascript:

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);
            }
        };

score 3 · Accepted Answer

キャンバス上のマスクに CSS を適用することはできません。

三角形は、操作できる DOM オブジェクトではありません。

三角形は、キャンバスに描かれたピクセルの集まりです。

ただし、キャンバスは 3 つのラベル付きの三角形の画像を描画できます

ここに画像の説明を入力

以下の再利用可能な関数は、次のものを受け取ります。

描画するキャンバスのコンテキスト
描画+クリップしたい画像オブジェクト
三角形の下に描きたい文字

テキストを指定すると、下部の赤いバーとテキストが描画されます。

テキストを指定しない場合、バーとテキストは描画されません。

したがって、マウスホバーに応じてテキストのオン/オフを切り替えることができます。

3 つの三角形すべてを描画する 1 つの関数のコードを次に示します。

    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);
        }


    }

ここにコードとフィドルがあります：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 を使用しないコードです]

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

javascript - マスクされたキャンバス画像に CSS 効果を追加できますか?

1 に答える 1

Related

Reference