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

我有一个画布，我可以在其中引入文本。我正在尝试使用Select object更改画布中文本的颜色，但失败了。有人能帮我做这个吗？这是代码，感谢您抽出时间

以下是用于将文本介绍到画布中的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(){});

以下是HTML：

您正在main8上设置fillStyle，main8是canvas元素。 该属性应在画布上下文上设置，即main8.getContext2d

此外，您还应该通过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();
}

试一试：

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； ctx.font=bold 90px Arial； ctx.textAlign=中心； var$text1=document.getElementByIdsourceText1； $text1.onkeyup=function{redrawTexts；} 函数重绘文本{ ctx.clearRect0,0，canvas.width，canvas.height； wrapTextctx，$text1.value，66.5,82，Arial； } 函数wrapTextcontext，文本，x，y，maxWidth，fontSize，fontFace{ var words=text.split“”； var行=； var lineHeight=fontSize； context.font=fontSize++fontFace； forvar n=0；nmaxWidth{ context.fillTextline，x，y； 行=字[n]+''； y+=线宽； } 否则{ 直线=测试线； } } context.fillTextline，x，y； 返回的； } var main8=document.getElementByIdcanvas； var render8=main8.getContext2d； 函数colorv8{ 开关V8{ //顶部：103px；左侧：210px 绿色外壳： main8.getContext2d.fillStyle='绿色'； 打破 红色表壳： main 8.getContext2d.fillStyle=ff3300； 打破 } 重画文本； } 画布{边框：2个透明点； 边界半径：5px； 显示：块； } 蓝色 黑色 红色 黄的 绿色 您正在main8上设置fillStyle，main8是canvas元素。 该属性应在画布上下文上设置，即main8.getContext2d

此外，您还应该通过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();
}

试一试：

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； ctx.font=bold 90px Arial； ctx.textAlign=中心； var$text1=document.getElementByIdsourceText1； $text1.onkeyup=function{redrawTexts；} 函数重绘文本{ ctx.clearRect0,0，canvas.width，canvas.height； wrapTextctx，$text1.value，66.5,82，Arial； } 函数wrapTextcontext，文本，x，y，maxWidth，fontSize，fontFace{ var words=text.split“”； var行=； var lineHeight=fontSize； context.font=fontSize++fontFace； forvar n=0；nmaxWidth{ context.fillTextline，x，y； 行=字[n]+''； y+=线宽； } 否则{ 直线=测试线； } } context.fillTextline，x，y； 返回的； } var main8=document.getElementByIdcanvas； var render8=main8.getContext2d； 函数colorv8{ 开关V8{ //顶部：103px；左侧：210px 绿色外壳： main8.getContext2d.fillStyle='绿色'； 打破 红色表壳： main 8.getContext2d.fillStyle=ff3300； 打破 } 重画文本； } 画布{边框：2个透明点； 边界半径：5px； 显示：块； } 蓝色 黑色 红色 黄的 绿色

---

有关详细信息，请参阅我尝试了此选项，但仍然没有更改文本颜色。当我选择绿色时，文本应该变为绿色，但仍然是黑色。@P.Pann我添加了一个片段。运行它并尝试在输入中写入一些内容，然后将颜色更改为绿色或红色。哈哈哈，我尝试了同样的方法，但没有成功。非常感谢您的帮助，现在它工作了。你是最棒的！有关详细信息，请参阅我尝试了此选项，但仍然没有更改文本颜色。当我选择绿色时，文本应该变为绿色，但仍然是黑色。@P.Pann我添加了一个片段。运行它并尝试在输入中写入一些内容，然后将颜色更改为绿色或红色。哈哈哈，我尝试了同样的方法，但没有成功。非常感谢您的帮助，现在它工作了。你是最棒的！

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

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