目录

WebGL2Fundamentals.org

Fix, Fork, Contribute

WebGL2 文字 - 二维 Canvas

此文上接WebGL 文字绘制,如果没读建议从那里开始。

除了使用 HTML 元素显示文字,还可以使用一个新画布,但是使用的是二维上下文. 我只是猜测它会比直接使用 HTML 元素要快一些,没有证明过。当然也会少一些灵活性, 比如不能使用好用的 CSS 样式了,但是也不需要创建并保持 HTML 元素了。

和其他例子一样我们先创建一个容器,但是这次放两个画布进去。

<div class="container">
  <canvas id="canvas" width="400" height="300"></canvas>
  <canvas id="text" width="400" height="300"></canvas>
</div>

接下来设置 CSS 让画布成为覆盖层

.container {
    position: relative;
}

#text {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}

在初始化时找到文字画布并创建一个二维上下文。

// 找到画布
var textCanvas = document.querySelector("#text");

// 创建一个二维上下文
var ctx = textCanvas.getContext("2d");

渲染时,像 WebGL 一样,需要每帧都清空二维画布。

function drawScene() {
    ...

    // 清空二维画布
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

然后只调用 fillText 绘制文字

    ctx.fillText(someMsg, pixelX, pixelY);

这是结果

为什么文字变小了?因为那是二维画布的默认文字大小,如果你想使用其它大小可以 看看二维画布 API

使用二维画布的另一个原因是可以很容易的绘制其他东西,例如添加一个箭头

// 绘制箭头和文字

// 保存画布设置
ctx.save();

// 将画布原点移动到 F 的正面右上角
ctx.translate(pixelX, pixelY);

// 绘制箭头
ctx.beginPath();
ctx.moveTo(10, 5);
ctx.lineTo(0, 0);
ctx.lineTo(5, 10);
ctx.moveTo(0, 0);
ctx.lineTo(15, 15);
ctx.stroke();

// 绘制文字
ctx.fillText(someMessage, 20, 20);

// 还原画布设置
ctx.restore();

我们之前讲过使用二维画布的平移方法, 不需要在绘制箭头的时候做其他运算了。我们只是假设绘制在原点,并且需要把原点移动到 F 的右上角。

涉及到二维画布的使用,可以查看二维画布 API 获得更多信息。接下来我们将用 WebGL 渲染文字.

有意见或建议? 在GitHub上提issue.
comments powered by Disqus