WebGL 文本 Canvas 2D

WebGL 文本 Canvas 2D

相對于使用 HTML 元素制作文本我們還可以使用另一種使用 2D 上下文的畫布。不需要分析，我們就可以做一個猜測，這將比使用 DOM 快。當然也會變得相對不靈活。你可能不能得到所有的 CSS 樣式。但是，這兒沒有 HTML 元素可以創(chuàng)建和跟蹤。

和前邊其他的例子類似，讓我們來構(gòu)造一個容器，但這一次我們將在其中放置兩個畫布。

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

接下來設置 CSS，以使畫布和 HTML 重疊

.container {
position: relative;
}

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

現(xiàn)在按照初始化時間查找文本畫布，并為之創(chuàng)建一個 2D 上下文。

// look up the text canvas.
var textCanvas = document.getElementById("text");

// make a 2D context for it
var ctx = textCanvas.getContext("2d");

當繪圖時，就像 WebGL，我們需要清除 2d 畫布的每一幀。

function drawScene() {
...

// Clear the 2D canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

然后我們就調(diào)用 fillText 繪制文本

ctx.fillText(someMsg, pixelX, pixelY);

下面有一個例子：

為什么這個文本更小呢？因為這是 canvas2d 默認的尺寸。如果你想要其它的尺寸，可以查看 canvas2d api。

使用 canvas2d 的另一個原因是用它很容易繪制其他的事物。例如讓我們來添加一個箭頭：

// draw an arrow and text.

// save all the canvas settings
ctx.save();

// translate the canvas origin so 0, 0 is at
// the top front right corner of our F
ctx.translate(pixelX, pixelY);

// draw an arrow
ctx.beginPath();
ctx.moveTo(10, 5);
ctx.lineTo(0, 0);
ctx.lineTo(5, 10);
ctx.moveTo(0, 0);
ctx.lineTo(15, 15);
ctx.stroke();

// draw the text.
ctx.fillText(someMessage, 20, 20);

// restore the canvas to its old settings.
ctx.restore();

這里我們利用 canvas2d 的翻譯功能，所以畫箭頭時，我們不需要做任何額外的工作。我們只是假裝在原點開始繪制，翻譯負責移動原點到 F 的角落。

封面使用了 2D 畫布。接下來，我們將實際在 WebGL 呈現(xiàn)文本。