javascript - 在 HTML 中使用 Canvas 时不显示文本

Question

我正试图在我的网页上实现这一目标:

我已经使用 canvas 绘制了三 Angular 形，这很成功，但是当我尝试放置文本时，它没有显示(也尝试放置 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 .

想法是在边框的帮助下创建一个三 Angular 形:

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 .