我怎样才能消失文本“?”在画布上单击按钮时?
这是我的代码的链接: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';
}
最佳答案
您可以在绘制问号if (enableText)
之前添加条件,然后在disableText()
方法中重新绘制画布:
...
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>