1

如果我使用 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);
            }
        };
4

1 回答 1

3

您不能将 CSS 应用于画布上的蒙版。

您的三角形不是您可以操作的 DOM 对象。

你的三角形只是画在画布上的一堆像素。

但是画布能够绘制您的 3 个标记的三角形图像

在此处输入图像描述在此处输入图像描述

下面的可重用函数包含：

  • 您要在其上绘制的画布的上下文
  • 要绘制的图像对象+剪辑
  • 要在三角形底部绘制的文本

如果您提供文本，将绘制底部的红色条和文本。

如果您不提供文本，则不会绘制条形图和文本。

因此，您可以打开/关闭文本以响应鼠标悬停。

这是一个函数的代码，它将绘制所有 3 个三角形

    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>
于 2013-08-30T16:23:36.223 回答