Question

我有一个画布，我可以在其中引入文字。我正在尝试使用Select对象从画布更改该文本的颜色，但我失败了。有人可以帮我这个吗？这是代码，谢谢你的时间。

JS 用于在画布中引入文字：

$(function(){

   var canvas=document.getElementById("canvas");
   var ctx=canvas.getContext("2d");

   ctx.font= "bold 90px Arial";
   ctx.textAlign="center";

   var $text1=document.getElementById("sourceText1");

   $text1.onkeyup=function(e){ redrawTexts(); }

   function redrawTexts(){
       ctx.clearRect(0,0,canvas.width,canvas.height);
       wrapText(ctx,$text1.value,66.5, 82,"Arial");

   }

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

 }); // end $(function(){});

这是 JS 用于更改颜色：

  var main8 = document.getElementById("canvas");
  var render8 = main8.getContext("2d");

  function color(v8) {
    switch(v8) {
     // top: 103px; left: 210px
        case "green":
            main8.fillStyle = 'green';
            break;

        case "red":
            main8.fillStyle = "#ff3300";
            break;
            }
  }

这是 HTML：

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

 <select name="colours" onchange="color(this.value)">
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
 </select>

以下是 CSS：

  #canvas{border:2px dotted transparent;
  border-radius: 5px;
   }

Answer 1

您在fillStyle上设置了main8，这是画布元素该属性应在画布上下文中设置，即main8.getContext("2d")。

此外，您还应该通过redrawTexts功能重新绘制文字。

function color(v8) {
  switch(v8) {
   // top: 103px; left: 210px
      case "green":
          main8.getContext("2d").fillStyle = 'green';
          break;

      case "red":
          main8.getContext("2d").fillStyle = "#ff3300";
          break;
  }
  redrawTexts();
}

尝试一下：

＆＃13;

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");

  ctx.font= "bold 90px Arial";
  ctx.textAlign="center";

  var $text1=document.getElementById("sourceText1");

  $text1.onkeyup=function(e){ redrawTexts(); }

  function redrawTexts(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      wrapText(ctx,$text1.value,66.5, 82,"Arial");

  }

  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 main8 = document.getElementById("canvas");
  var render8 = main8.getContext("2d");

  function color(v8) {
    switch(v8) {
     // top: 103px; left: 210px
        case "green":
            main8.getContext("2d").fillStyle = 'green';
            break;

        case "red":
            main8.getContext("2d").fillStyle = "#ff3300";
            break;
    }
    redrawTexts();
  }

＆＃13;

#canvas{border:2px dotted transparent;
  border-radius: 5px;
  display: block;
 }

＆＃13;

<input id="sourceText1" type="text" style="height: 32px;width: 223px;">

 <select name="colours" onchange="color(this.value)">
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
 </select>
 
<canvas id="canvas" width="300" height="300"></canvas>

＆＃13;

使用“选择”选项从画布更改文本颜色

1 个答案: