Canvas 在左侧创建一个三角形指针的div

我需要在HTML中创建一个非矩形div

问题是，它们都是透明的背景。此外，该div中的图像也是在一组图像之间旋转的幻灯片

大图像应该是旋转的。那部分很容易。最难的部分是指向杂项的三角形，它对旋转图片是透明的。指针会移动。在本例中，这是对应于杂项的图像集。当用户单击食品包装时，指针必须移动到指向食品包装的位置

你知道如何将图像切割成三角形，并保持颜色对img透明，而其他部分对面板背景图像透明吗

HTML:

我需要一个像上面的B区一样的旋转体。。带有指向相应菜单的小曲线的矩形。你知道怎么做吗

---

简而言之，图像是普通的矩形图像，但应该像黑色div一样裁剪，并用指针显示图像集的类别。

不要设置

背景：

或

背景-

CSS中的任何

：

，在您希望图像的元素中，并使用透明的图像作为

背景：url（'img.png'））;。请记住，您不能在
img
标记中添加HTML，因此也要避免使用它。
我已经为您创建了一个JSFIDLE。
我所做的是在Div的一侧创建一个指针（纯粹使用CSS，与您的黑盒看起来完全一样），并使用JQuery更改它指向的位置


告诉我这是否是你要找的

Hope this works for you

干杯

编辑：我为你编辑了小提琴。我无法准确地创建您想要的内容，因此我在这里采用了第二种可能的解决方案。我给了三角形一个浅色和不透明，这将给它的幻觉是透明的。
问题是我用边界创建了三角形。不能为边框设置边框（为了使三角形的“填充”透明）

CSS

HTML


单击此处更改指针的位置


JS（包括JQuery）

$（'p'）.one（'click'，function（）{
$（'head'）.append（'pointingDiv:before{top:50px；}'）；
});

我个人认为，如果你愿意在左边裁剪一点图像并使用过多的javascript，就没有办法摆脱这个例外

祝你好运
Html5 Canvas可以使用它的剪辑功能完成你的指示器


下面是它的工作方式：


把画布放在一个小隔间里
告诉画布指示器的位置（“Y”坐标）
告诉画布要在不规则画布分区中剪辑的图像

这是用于更改画布图像和指示器的函数：

        drawCanvasDiv(indicatorYPosition,yourImage);

这是绘制不规则长方体的代码，该长方体内部剪裁有图像：

一旦你完全按照你喜欢的方式来设计你的不规则画布div…这个代码不会改变

    function drawCanvasDiv(indicatorY,img){
        ctx.save();
        ctx.clearRect(0,0,w,h);

        // this call will define the path inside which the image will be clipped
        definePath(indicatorY);

        // clip any image inside the irregularly shaped path
        ctx.clip();

        // draw your desired image
        ctx.drawImage(img,0,0,img.width,img.height);

        // finally draw the gray border of the irregular shape
        definePath(indicatorY);
        ctx.lineWidth=2;
        ctx.strokeStyle="lightgray";
        ctx.stroke();
        ctx.restore();
    }

下面是代码和小提琴：


正文{背景色：象牙色；填充：20px；}
按钮{边距：20px；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var w=画布宽度；
var h=画布高度；
var-leftOffset=15；
var指示灯亮度=20；
无功电流y=125；
var img=新图像（）；
img.onload=函数（）{
拉票部门（当前，img）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";
功能drawCanvasDiv（指示，img）{
ctx.save（）；
ctx.clearRect（0,0，w，h）；
定义路径（指示）；
ctx.clip（）；
ctx.drawImage（img，0,0，img.宽度，img.高度）；
定义路径（指示）；
ctx.线宽=2；
ctx.strokeStyle=“浅灰色”；
ctx.stroke（）；
ctx.restore（）；
}
函数定义路径（指示）{
ctx.beginPath（）；
ctx.moveTo（leftOffset，0）；
ctx.lineTo（w，0）；
ctx.lineTo（w，h）；
ctx.lineTo（左偏移，h）；
ctx.lineTo（左偏移、指示灯+指示灯亮度/2）；
ctx.lineTo（0，指示）；
ctx.lineTo（左偏移，指示指示灯亮度/2）；
ctx.closePath（）；
}
$（“#向上”）。单击（函数（）{
如果（当前Y-20-指示器指示灯/2>0）{
电流y-=20；
拉票部门（当前，img）；
}
});
$（“#向下”）。单击（函数（）{
如果（当前Y+20+指示灯亮起/2请看我一段时间，看看你到底想做什么。虽然看起来是一个非常小的细节…你肯定不能只剪切几个三角形图像，其色调与每张幻灯片大致匹配（比如漂亮的中间底色），然后随着幻灯片的变化将其替换掉？创建真正的透明度，而不使用某种“遮罩”这种方法听起来很有挑战性。事实上，我只是想补充一下我上面的评论，因为你确切知道每张幻灯片上箭头的垂直位置，你可以对每个幻灯片进行精确的阴影采样并切割三角形。然后在图像之间使用一点js淡色，这将是无缝的。也许我应该将其作为一个例子发布回答，但我只有65%确定我正确理解了你的问题。是的，这是正确的，但image div有多个图像，从我的问题开始旋转，这使问题变得复杂。旋转图像有可变的图像集。我将附加我的php后端和文件夹层次结构，以了解它在几个小时内应该如何工作。我需要屋檐现在。它是关闭的，但我需要如上图所示，黑色分区B应该填充图像，其余的应该是透明的分区A背景。我把黑色背景，因为SO的背景是白色的。我已经尝试修改你的c
#pointingDiv {
margin:20px;
width: 500px;
height: 350px;
position: relative;
background:url('http://thatgamecompany.com/wp-content/themes/thatgamecompany/_include/img/flower/flower-game-screenshot-2.jpg');
background-size: cover;
}
#pointingDiv:before {
content:"";
position: absolute;
right: 100%;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 15px solid rgba(255, 255, 0, .2);
border-bottom: 8px solid transparent;  
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

<div id="pointingDiv">   </div>

<p>Click here to change the pointer's location</p>

$('p').one('click',function(){
$('head').append('<style>#pointingDiv:before{top: 50px;}</style>');
});

        drawCanvasDiv(indicatorYPosition,yourImage);

    function drawCanvasDiv(indicatorY,img){
        ctx.save();
        ctx.clearRect(0,0,w,h);

        // this call will define the path inside which the image will be clipped
        definePath(indicatorY);

        // clip any image inside the irregularly shaped path
        ctx.clip();

        // draw your desired image
        ctx.drawImage(img,0,0,img.width,img.height);

        // finally draw the gray border of the irregular shape
        definePath(indicatorY);
        ctx.lineWidth=2;
        ctx.strokeStyle="lightgray";
        ctx.stroke();
        ctx.restore();
    }

<!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; padding:20px; }
    button{ margin:20px; }
</style>

<script>
$(function(){

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

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var w=canvas.width;
    var h=canvas.height;
    var leftOffset=15;
    var indicatorHeight=20;
    var currentY=125;

    var img=new Image();
    img.onload=function(){
        drawCanvasDiv(currentY,img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";


    function drawCanvasDiv(indicatorY,img){
        ctx.save();
        ctx.clearRect(0,0,w,h);
        definePath(indicatorY);
        ctx.clip();
        ctx.drawImage(img,0,0,img.width,img.height);
        definePath(indicatorY);
        ctx.lineWidth=2;
        ctx.strokeStyle="lightgray";
        ctx.stroke();
        ctx.restore();
    }

    function definePath(indicatorY){
        ctx.beginPath();
        ctx.moveTo(leftOffset,0);
        ctx.lineTo(w,0);
        ctx.lineTo(w,h);
        ctx.lineTo(leftOffset,h);
        ctx.lineTo(leftOffset,indicatorY+indicatorHeight/2);
        ctx.lineTo(0,indicatorY);
        ctx.lineTo(leftOffset,indicatorY-indicatorHeight/2);
        ctx.closePath();
    }


    $("#up").click(function(){
        if(currentY-20-indicatorHeight/2>0){ 
            currentY-=20; 
            drawCanvasDiv(currentY,img);
        }
    });

    $("#down").click(function(){
        if(currentY+20+indicatorHeight/2<h){ 
            currentY+=20; 
            drawCanvasDiv(currentY,img);
        }
    });


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

</head>

<body>
    <canvas id="canvas" width=300 height=248></canvas><br>
    <button id="up">Indicator Up</button>
    <button id="down">Indicator Down</button>
</body>
</html>