WebGL 文本 Canvas 2D

WebGL 文本 Canvas 2D

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

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

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

接下來(lái)設(shè)置 CSS，以使畫(huà)布和 HTML 重疊

.container {
position: relative;
}

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

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

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

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

當(dāng)繪圖時(shí)，就像 WebGL，我們需要清除 2d 畫(huà)布的每一幀。

function drawScene() {
...

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

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

ctx.fillText(someMsg, pixelX, pixelY);

下面有一個(gè)例子：

為什么這個(gè)文本更小呢？因?yàn)檫@是 canvas2d 默認(rèn)的尺寸。如果你想要其它的尺寸，可以查看 canvas2d api。

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

// 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 的翻譯功能，所以畫(huà)箭頭時(shí)，我們不需要做任何額外的工作。我們只是假裝在原點(diǎn)開(kāi)始繪制，翻譯負(fù)責(zé)移動(dòng)原點(diǎn)到 F 的角落。

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