如何在HTML5画布中获取清晰文本，使用Javascript旋转

Question

我正在使用HTML5 canvas和一些Javascript来生成一个旋转的3D文本链接范围（source）。

HTML：

<div id="myCanvasContainer">
    <canvas id="myCanvas" width="800" height="800" style="margin: 0 auto; display: block; padding:20px 0;">
      <ul>
        <a href="#">John Cage</a>
        <a href="#">Morton Feldman</a>
        <a href="#">Steve Reich</a>
        <a href="#">John Adams</a>
        <a href="#">Philip Glass</a>
        <a href="#">Arthur Russell</a>
        <a href="#">Brian Eno</a>
        <a href="#">Richard James</a>
      </ul>
   </canvas>

Javascript init文件：

window.onload = function() {

    try {
    TagCanvas.textColour = '#000000';
    TagCanvas.textHeight = 20;
    TagCanvas.outlineColour = '#330000';
    TagCanvas.outlineMethod = 'colour';
    TagCanvas.radiusX = 0.9;
    TagCanvas.radiusY = 0.9;
    TagCanvas.radiusZ = 0.9;
    TagCanvas.depth = 0.5;
    TagCanvas.shuffleTags = true;
    TagCanvas.maxSpeed = 0.01;
    TagCanvas.txtOpt = true;
    TagCanvas.wheelZoom = false;
    TagCanvas.shape = "sphere";
    TagCanvas.textFont =  null;
    TagCanvas.Start('myCanvas');
    } catch(e) {
         document.getElementById('myCanvasContainer').style.display = 'none';
    }
};

现在这是固定宽度，因此不会更改插值或宽度。缩放已关闭。我希望得到比下面显示的更清晰的文字。将textFont设置为null意味着它使用页面的默认字体。与默认文本相比，它看起来有点模糊。有可能让它更清晰吗？我该怎么做？

Answer 1

我建议你使用SVG而不是Canvas。由于SVG在缩放时不受影响。