背景图像可见锥形css

Question

如何以锥形形状显示背景图像，使锥体外部的部分不可见。示例而不是红色我得到锥形裁剪图像。

.cone{
    width:0;
    height:0;
    background-image:url('images/bg.png');
    border-left: 155px solid transparent;
    border-right: 155px solid transparent;
    border-top: 280px solid transparent;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top:-4%;
    left:24%;
    -webkit-transform:rotate(0deg);
    z-index:10;
}

使用上面的代码，它提供了一个完整的圆圈，似乎只适用于纯色。我希望将8个不同背景的锥体连接起来形成一个圆圈。是否有其他方法可以实现背景图像？

Answer 1

您可以使用context.clip

限制路径内的绘图

演示：http://jsfiddle.net/m1erickson/fsux6pnz/

示例代码：

// save the unclipped context state
ctx.save();

// begin defining a path
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.quadraticCurveTo(x2,y2,x3,y3);
ctx.lineTo(cx,cy);
ctx.closePath();

// clip all drawing into that path
ctx.clip();

// draw the image on the canvas
// It will only display inside the defined path
ctx.drawImage(img,0,0);

// restore the context state
ctx.restore();