对 Canvas 文本使用自定义字体

Question

在我的代码中，我可以将文本引入画布，还可以更改颜色和位置。我试图为文本输入设置一种自定义字体，但它不起作用（它仍然是我认为是 Arial 的标准字体）。你能帮我解决这个问题吗？这是我的 JsFiddle 代码：https://jsfiddle.net/x6dqox1t/。感谢您的宝贵时间。

这是我的 CSS 代码：

#canvas3 {
 border: 2px dotted black;
 border-radius: 5px;
 position: absolute;
}

#canvas4 {
 border: 2px dotted black;
 border-radius: 5px;
 position: absolute;
}

.green {
 border: 0.1px solid #CCC;
 margin: 1px;
 zoom: 3;
 vertical-align: middle;
 display: inline-block;
 cursor: pointer;
 overflow: hidden;
 width: 22.5px;
 height: 20px;
 background-color: #009933;
}

.green:hover,
.green:active,
.green:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
 }

 .red {
   border: 0.1px solid #CCC;
   margin: 1px;
   zoom: 3;
   vertical-align: middle;
   display: inline-block;
   cursor: pointer;
   overflow: hidden;
   width: 22.5px;
   height: 20px;
   background-color: #ff0000;
  }

  .red:hover,
  .red:active,
  .red:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
  }


 .orange {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: orange;
 }

 .orange:hover,
 .orange:active,
 .orange:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
   }

  @font-face {
   font-family: 'KulminoituvaRegular';
   src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
  }

这是我的 JAVASCRIPT 代码：

 var canvas3 = document.getElementById("canvas3");
    var ctx3 = canvas3.getContext("2d");

    ctx3.font = " bold 90px KulminoituvaRegular";
    ctx3.fillStyle = "black";
    ctx3.textAlign = "center";

    var $text3 = document.getElementById("sourceText3");

    $text3.onkeyup = function(e) {
      redrawTextsCan3();
    }

    function redrawTextsCan3() {
      ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
      wrapText(ctx3, $text3.value, 66.5, 82, "KulminoituvaRegular");
    }

    function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
      var words = text.split(' ');
      var line = '';
      var lineHeight = fontSize;

      context.font = fontSize + " " + fontFace;

      for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        } else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
      return (y);
    }

    var loc = document.getElementById("canvas3");
    var ctxx = loc.getContext("2d");

    function path3(v2) {
      switch (v2) {
        // top: 103px; left: 210px
        case "rightabove":
          loc.style.top = "93px";
          loc.style.left = "130px";
          loc.style.position = "absolute";
          break;

        case "rightbelow":
          loc.style.top = "133px";
          loc.style.left = "130px";
          loc.style.position = "absolute";
          break;

        case "left":
          loc.style.top = "113px";
          loc.style.left = "400px";
          loc.style.position = "absolute";
          break;

        case "center":
          loc.style.top = "113px";
          loc.style.left = "173px";
          loc.style.position = "absolute";
          break;
      }
      redrawTextsCan3();
    }


    function color3(v4) {
      v4 = v4.dataset.id;
      switch (v4) {
        // top: 103px; left: 210px

        case "black":
          ctx3.fillStyle = '#000000';
          break;

        case "red":
          ctx3.fillStyle = "#ff0000";
          break;

        case "green":
          ctx3.fillStyle = "#009933";
          break;

        case "orange":
          ctx3.fillStyle = "#ff9900";
          break;
      }
      redrawTextsCan3();
    }

这是 HTML 代码：

<div>
 <select name="change1" onchange="path3(this.value)">
   <option value="left">Left</option>
   <option value="center" selected>Center</option>
   <option value="rightabove">Right Above</option>
   <option value="rightbelow">Right Below</option>
 </select>

 <h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>

 <button type="button" class="black" data-id="black" onclick="color3(this)">
 </button>
 <button type="button" class="red" data-id="red" onclick="color3(this)">
 </button>
 <button type="button" class="green" data-id="green" onclick="color3(this)">
 </button>
 <button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>


 <h3 style="font-size: 15px;padding-top: 0px">Number</h3>

 <input id="sourceText3" maxlength="1" type="text" style="height: 32px;width: 223px;">

 <canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>

 </div>

Answer 1

您的字体不起作用的原因是字体源 (http://www.miketaylr.com/f/kulminoituva.ttf) 是通过 http 加载的，而 jsfiddle 是通过 https 加载的。所以你会得到一个Mixed Content 错误。

我已将该字体上传到 GitHub，然后使用 RawGit 生成源链接。

 var canvas3 = document.getElementById("canvas3");
        var ctx3 = canvas3.getContext("2d");

        ctx3.font = "90px MyFont";
        ctx3.fillStyle = "black";
        ctx3.textAlign = "center";

        var $text3 = document.getElementById("sourceText3");

        $text3.onkeyup = function(e) {
          redrawTextsCan3();
        }

        function redrawTextsCan3() {
          ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
          wrapText(ctx3, $text3.value, 66.5, 82, "MyFont");
        }

        function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
          var words = text.split(' ');
          var line = '';
          var lineHeight = fontSize;

          context.font = fontSize + " " + fontFace;

          for (var n = 0; n < words.length; n++) {
            var testLine = line + words[n] + ' ';
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > maxWidth) {
              context.fillText(line, x, y);
              line = words[n] + ' ';
              y += lineHeight;
            } else {
              line = testLine;
            }
          }
          context.fillText(line, x, y);
          return (y);
        }

        var loc = document.getElementById("canvas3");
        var ctxx = loc.getContext("2d");

        function path3(v2) {
          switch (v2) {
            // top: 103px; left: 210px
            case "rightabove":
              loc.style.top = "93px";
              loc.style.left = "130px";
              loc.style.position = "absolute";
              break;

            case "rightbelow":
              loc.style.top = "133px";
              loc.style.left = "130px";
              loc.style.position = "absolute";
              break;

            case "left":
              loc.style.top = "113px";
              loc.style.left = "400px";
              loc.style.position = "absolute";
              break;

            case "center":
              loc.style.top = "113px";
              loc.style.left = "173px";
              loc.style.position = "absolute";
              break;
          }
          redrawTextsCan3();
        }


        function color3(v4) {
          v4 = v4.dataset.id;
          switch (v4) {
            // top: 103px; left: 210px

            case "black":
              ctx3.fillStyle = '#000000';
              break;

            case "red":
              ctx3.fillStyle = "#ff0000";
              break;

            case "green":
              ctx3.fillStyle = "#009933";
              break;

            case "orange":
              ctx3.fillStyle = "#ff9900";
              break;
          }
          redrawTextsCan3();
        }

   #canvas3 {
   border: 2px dotted black;
   border-radius: 5px;
   position: absolute;
 }
 
 #canvas4 {
   border: 2px dotted black;
   border-radius: 5px;
   position: absolute;
 }
 
 .green {
   border: 0.1px solid #CCC;
   margin: 1px;
   zoom: 3;
   vertical-align: middle;
   display: inline-block;
   cursor: pointer;
   overflow: hidden;
   width: 22.5px;
   height: 20px;
   background-color: #009933;
 }
 
 .green:hover,
 .green:active,
 .green:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
 }
 
 .red {
   border: 0.1px solid #CCC;
   margin: 1px;
   zoom: 3;
   vertical-align: middle;
   display: inline-block;
   cursor: pointer;
   overflow: hidden;
   width: 22.5px;
   height: 20px;
   background-color: #ff0000;
 }
 
 .red:hover,
 .red:active,
 .red:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
 }
 
 .black {
   border: 0.1px solid #CCC;
   margin: 1px;
   zoom: 3;
   vertical-align: middle;
   display: inline-block;
   cursor: pointer;
   overflow: hidden;
   width: 22.5px;
   height: 20px;
   background-color: black;
 }
 
 .black:hover,
 .black:active,
 .black:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
 }
 
 .orange {
   border: 0.1px solid #CCC;
   margin: 1px;
   zoom: 3;
   vertical-align: middle;
   display: inline-block;
   cursor: pointer;
   overflow: hidden;
   width: 22.5px;
   height: 20px;
   background-color: orange;
 }
 
 .orange:hover,
 .orange:active,
 .orange:focus {
   border: 1px solid black;
   box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
   opacity: 0.7;
   text-decoration: none;
   text-shadow: -1px -1px 0 #136a65;
   -webkit-transition: all 250ms linear;
   transition: all 250ms linear;
 }

 @font-face {
    font-family: 'MyFont';
    src: url('https://cdn.rawgit.com/BlazingFire007/Misc/d656d2e6/kulminoituva.ttf');
}

<div>
  <select name="change1" onchange="path3(this.value)">
    <option value="left">Left</option>
    <option value="center" selected>Center</option>
    <option value="rightabove">Right Above</option>
    <option value="rightbelow">Right Below</option>
  </select>

  <h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>

  <button type="button" class="black" data-id="black" onclick="color3(this)"></button>
  <button type="button" class="red" data-id="red" onclick="color3(this)"></button>
  <button type="button" class="green" data-id="green" onclick="color3(this)"></button>
  <button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>


  <h3 style="font-size: 15px;padding-top: 0px">Number</h3>

  <input id="sourceText3" maxlength="2" type="text" style="height: 32px;width: 223px;">

  <canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>

</div>