在HTML中使用画布时不显示文本

Question

我正在尝试在我的网页上实现这一目标：

我使用画布绘制了三角形，这是成功的，但是当我尝试放置文本时，它没有显示（也尝试使用z-index）。

这是相应的 js fiddle 。

这是html部分

<section id="intro2" data-navigation-tag="Features" style="display: block; background-position: 50% 44.866px;">

    <canvas id="intro2canvas"></canvas>
    <div id="intro2content" class="content" style="z-index:100;">
        <div class="contentData"> 
            <span><h2>Celebrating<br/>the Past,<br/>Unveiling<br/>the Future</h2><span>
        </div>
        <!--<div class="intro2leftdiv"></div>-->
    </div>
    <div style="position:absolute;float:left;bottom:3%;left:4.5%;height:25%;width:34%;">
        <img src="innerimages/50yrs.png" width="100%" height="100%">
    </div>
</section>

怎么做？

Answer 1

您只能使用CSS创建此类效果。在这种情况下，您将对内容更加灵活。请参阅demo。

这个想法是在边界的帮助下创建一个三角形：

<强> CSS ：

.triangle {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 50%;
    border-style: solid;
    border-color: transparent transparent transparent rgba(242,91,32,0.45);
}

还有一小部分 JS ：

var triangle = document.getElementById('triangle'),
    triangleWidth = triangle.offsetWidth;
triangle.style.borderWidth = triangleWidth + 'px 0 0 ' + triangleWidth + 'px';

您可以详细了解此方法here和here。