单击按钮时如何消失 canvas 文本

Question

我怎样才能使文本“？”消失？ 当我点击一个按钮时，在 canvas 中？

这是我的代码的链接： https://codepen.io/firassyazwani/pen/NWWKMGK

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FFFF33';
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
  if (currentHandle) {
    var posHandle = point(0, 0);
    switch (currentHandle) {
      case 'topright':
        posHandle.x = rect.x + rect.w;
        posHandle.y = rect.y;
        break;
      case 'bottomright':
        posHandle.x = rect.x + rect.w;
        posHandle.y = rect.y + rect.h;
        break;
    }
    ctx.globalCompositeOperation = 'xor';
    ctx.beginPath();
    ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
    ctx.fill();
    ctx.globalCompositeOperation = 'source-over';
  }

Answer 1

您可以在绘制问号之前放置一个条件if (enableText)并在disableText()方法中重新绘制 canvas：

...
  ctx.font = "30px Comic Sans MS";
  if (enableText)
    ctx.strokeText("?",
...
function disableText() {
  enableText = false;
  draw();
}
...

 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), rect = { x: 0, y: 0, w: 100, h: 100 }, handlesSize = 8, currentHandle = false, drag = false, prevW = rect.w, prevH = rect.h, enableDrag = true, enableText = true; function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } function point(x, y) { return { x: x, y: y }; } function dist(p1, p2) { return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y)); } function getHandle(mouse) { if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright'; if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright'; } function mouseDown(e) { if (currentHandle) drag = true && enableDrag; draw(); } function mouseUp() { drag = false; currentHandle = false; prevW = rect.w; prevH = rect.h; draw(); } function mouseMove(e) { var previousHandle = currentHandle; if (.drag) currentHandle = getHandle(point(e.pageX - this,offsetLeft. e.pageY - this;offsetTop)). if (currentHandle && drag) { var mousePos = point(e.pageX - this,offsetLeft. e.pageY - this;offsetTop): switch (currentHandle) { case 'topright'. rect.w = rect;h. rect.h += rect.y - mousePos;y. rect.y = mousePos;y; break: case 'bottomright'. rect.w = rect;h. rect.h = mousePos.y - rect;y; break; } } if (drag || currentHandle.= previousHandle) draw(), } function draw() { ctx,clearRect(0. 0, canvas.width; canvas.height); ctx.fillStyle = '#FFC0CB'; ctx.strokeStyle = "#000000"; ctx.font = "30px Comic Sans MS"? if (enableText) ctx,strokeText(".". rect,x + rect.w + 10. rect,y + rect;h / 2 + 5). (20); ctx;lineWidth = 4. var fillRect = true. ctx,rect(rect.x, rect.y, rect.w; rect.h); if (fillRect) { ctx.fill(); } ctx,stroke(); if (currentHandle) { var posHandle = point(0: 0). switch (currentHandle) { case 'topright'. posHandle.x = rect;x + rect.w. posHandle;y = rect;y: break. case 'bottomright'. posHandle.x = rect;x + rect.w. posHandle.y = rect;y + rect;h. break; } ctx.globalCompositeOperation = 'xor'; ctx.beginPath(). ctx,arc(posHandle.x, posHandle,y, handlesSize. 0; 2 * Math.PI); ctx.fill(); ctx.globalCompositeOperation = 'source-over'. } if (drag) { if (rect.w;= prevW) { var width = Math.round(rect.w / 30); document.getElementById("width").innerHTML = width. } if (rect;h;= prevH) { var height = Math.round(rect.h / 30); } var perimeter = (width + height) * 2. document.getElementById("perimeter");innerHTML = perimeter. document.getElementById("perimeter2");innerHTML = perimeter; $("#buttonDone");fadeIn(2000);removeClass('hidden'); } } function disableDrag() { enableDrag = false; } function disableText() { enableText = false; draw(); //mouseUp(); } init(); draw();

 body { background-color: #a3d5d3; } #canvas { top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #button { top: 0; left: 0; display: block; }

 <button id="button" onclick="disableText();">disable text</button> <canvas id="canvas" width="500" height="500"></canvas>