嘗試更改畫布中的字體大小和顏色時出現的問題

Question

我正在嘗試更改照片上畫布中的字體大小和顏色。 因此，您必須先上傳照片，然后才能向圖像添加文本。 添加照片並添加文本后，便可以更改顏色和字體，但是在嘗試更改顏色和字體時，必須重新提交或不應用更改。 有什么想法嗎？ 當他們更改顏色或字體大小時，是否需要重新繪制？ 提前致謝。

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>



<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>


<div id="image_div">
  <h1> Choose an Image to Upload </h1>
  <input type='file' name='img' id='uploadimage' />

</div>



<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>





<!-- Change Font Size --> 

<div class="radio">
  <input type="radio" name="radio" id="size16" onclick="size16()" checked="">
  <label for="size16"> Font Size 16  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size20" onclick="size20()" >
  <label for="size20"> Font Size 20  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size25" onclick="size25()" >
  <label for="size25"> Font Size 25  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"id="size30" onclick="size30()" >
  <label for="size30"> Font Size 30</label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size35" onclick="size35()" >
  <label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size40" onclick="size40()" >
  <label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size45" onclick="siz45()" >
  <label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size50" onclick="size50()" >
  <label for="size50"> Font Size 50 </label>
</div>

<Br> 

<!-- Change Color on Text --> 


<div class="col-lg-2 col-md-2 col-xs-12">

<div class="radio">
  <input type="radio" name="radio"  id="black" onclick="BlackText()" checked="">
  <label for="radio1"> Black  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="white" onclick="WhiteText()"  >
  <label for="radio1"> White  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="yellow" onclick="YellowText()"  >
  <label for="radio1"> Yellow  </label>
</div>
<div class="radio radio-primary">
  <input type="radio" name="radio" id="blue" onclick="BlueText()" >
  <label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
  <input type="radio" name="radio" id="green" onclick="GreenText()" >
  <label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
  <input type="radio" name="radio"id="red" onclick="RedText()"  >
  <label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
  <input type="radio" name="radio" id="orange" onclick="OrangeText()"  >
  <label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
  <input type="radio" name="radio"id="purple" onclick="PurpleText()"  >
  <label for="radio8"> Purple </label>
</div>
</div>

字幕：

//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================


var drawnImage;

function drawImage(ev) {
  console.log(ev);
  var ctx = document.getElementById('canvas').getContext('2d'),
    img = new Image(),
    f = document.getElementById("uploadimage").files[0],
    url = window.URL || window.webkitURL,
    src = url.createObjectURL(f);
  img.src = src;
  img.onload = function() {
    drawnImage = img;
    ctx.drawImage(img, 0, 0);
    url.revokeObjectURL(src);
  }
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);

//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
  drawImage();
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;

function draw() {
  ctx.rect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
//    ctx.fillStyle = "blue";
    ctx.fillText(text.text, text.x, text.y);
  }
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(drawnImage, 0, 0);
  draw();
}

function textHittest(x, y, textIndex) {
  var text = texts[textIndex];
  return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}

function handleMouseDown(e) {
  e.preventDefault();
  startX = parseInt(e.clientX - offsetX);
  startY = parseInt(e.clientY - offsetY);

  for (var i = 0; i < texts.length; i++) {
    if (textHittest(startX, startY, i)) {
      selectedText = i;
    }
  }
}
function handleMouseUp(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseOut(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseMove(e) {
  if (selectedText < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  var dx = mouseX - startX;
  var dy = mouseY - startY;
  startX = mouseX;
  startY = mouseY;
  var text = texts[selectedText];
  text.x += dx;
  text.y += dy;
  redraw();
}
$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

$("#submit").click(function() {
  var y = texts.length * 20 + 20;
  var text = {
    text: $("#theText").val(),
    x: 20,
    y: y
  };
//  ctx.font = "16px verdana";
  text.width = ctx.measureText(text.text).width;
  text.height = 16;
  texts.push(text);
  draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16 () {
    ctx.font = "16px verdana";
}
function size20 () {
    ctx.font = "20px verdana";
}
function size25 () {
    ctx.font = "25px verdana";
}
function size30 () {
    ctx.font = "30px verdana";
}
function size35 () {
    ctx.font = "35px verdana";
}
function size40 () {
    ctx.font = "40px verdana";
}
function size45 () {
    ctx.font = "45px verdana";
}
function size50 () {
    ctx.font = "50px verdana";
}




//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText () {
    ctx.fillStyle= 'purple';
}
function BlackText () {
    ctx.fillStyle= 'black';
}
function YellowText () {
    ctx.fillStyle= 'yellow';
}
function OrangeText () {
 ctx.fillStyle = "orange";
}
function BlueText () {
    ctx.fillStyle= 'blue';
}
function WhiteText () {
 ctx.fillStyle = "white";
}

 function GreenText () {
     ctx.fillStyle= 'green';
 }
 function RedText () {
  ctx.fillStyle = "red";
 }

Answer 1

您必須每xxx毫秒重新繪制一次Canvan，或連續繪制（刷新）它。