如何在Threejs中为canvasTexture正确设置画布大小

时间:2018-09-04 11:59:10

标签: three.js

这就是我在代码中设置的方式

createText(text = 'example') {
    const canvas = document.createElement('canvas');

    // canvas.width = 256;
    // canvas.height = 64;

    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#796e8c';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font='120px Arial';
    ctx.fillStyle = '#000000';
    ctx.fillText(text, 0, 120);

    const canvasTexture = new THREE.CanvasTexture(canvas);

    const spriteMaterail = new THREE.SpriteMaterial({
        map: canvasTexture,
        color: 0xffffff
    });
    const sprite = new THREE.Sprite(spriteMaterail);
    return sprite;
}

但上下文被剪切

enter image description here

如果我将画布大小设置为:

canvas.width = 256
canvas.width = 64

结果是这样的:

enter image description here

0 个答案:

没有答案