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

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

您要在canvas元素main8上设置fillStyle 。
该属性应在画布上下文上设置，即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();
}

试试看：

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

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

 <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>