如何在HTML5畫布中獲得清晰的文本（使用Javascript旋轉）

Question

我將HTML5 canvas與一些Javascript結合使用，以生成旋轉的3D球形文本鏈接（ 源 ）。

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初始化文件：

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不會受到影響。