html - 锥形 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();