codecamp

WebGL 文本 Canvas 2D

WebGL 文本 Canvas 2D

相对于使用 HTML 元素制作文本我们还可以使用另一种使用 2D 上下文的画布。不需要分析,我们就可以做一个猜测,这将比使用 DOM 快。当然也会变得相对不灵活。你可能不能得到所有的 CSS 样式。但是,这儿没有 HTML 元素可以创建和跟踪。

和前边其他的例子类似,让我们来构造一个容器,但这一次我们将在其中放置两个画布。

<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;
}

现在按照初始化时间查找文本画布,并为之创建一个 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);

然后我们就调用 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 呈现文本。

WebGL 文本 HTML
WebGL 文本 纹理
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }