我可以将 CSS 效果添加到蒙版的 Canvas 图像吗？答案

【问题标题】：Can I add CSS effects to a masked Canvas image?我可以将 CSS 效果添加到蒙版的 Canvas 图像吗？
【发布时间】：2013-08-31 01:23:06
【问题描述】：

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

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

您不能将 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>

【讨论】：

非常感谢您的帮助！我明白你的意思了！虽然我需要它是 Javascript 而不是 Jquery:( 你知道如何用 Javascript 制作它吗？
很高兴我能帮上忙。要在没有 JQ 的情况下使用 JS，只需将 jquery $(function(){}) 替换为 javascript 的原生 window.onload=function(){}。我已将纯 javascript 代码添加到答案的底部。
非常感谢您在这方面的帮助！问题解决了:) @markE