我有一个画布，我绘制了一个矩形，我想在满足条件时从屏幕上清除，条件触发但不清除屏幕上的矩形。我究竟做错了什么？我还应该提一下，我重绘了几次，因为它们是可拖动的，不确定这是否有所作为。到目前为止，我已经尝试过：
this.ctx.clearRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);
this.ctx.clearRect(0, 0, this.ctx.rect.w, this.ctx.rect.h);
dclick: function (e) {
e.preventDefault();
this.ctx.rect = {
startX: 25,
startY: 100,
w: (this.canvas.width - 50),
h: 300,
}
this.draw();
<div class="cv">
<canvas v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" v-on:dblclick="dclick" :id="'cv' + emp.id" class="canvas" width="150" height="700"></canvas>
<canvas class="back" :id="'back' + emp.id" width="150" height="700"></canvas>
</div>
</template>
function () {
for (let i = 0; i < this.st; i+=this.ic) {
this.ctx.beginPath();
this.ctx.moveTo(0, i);
this.ctx.lineTo(500, i);
this.ctx.stroke();
this.ctx.closePath();
this.ctx.fillStyle = "#222222";
this.ctx.fillRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);
this.drawHandles();
}
},
this.save();
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
this.draw();'
这是一笔发生的事情。 rect清除但不会保持清除状态。该框应垂直可拖动，并且在单击按钮时应清除并保持清除状态。要使框显示，您必须双击画布。 https://codepen.io/tjquinn/pen/BYZQqo
答案 0 :(得分：1)
正确的方法是：
context.clearRect（0,0，canvas.width，canvas.height）;
您需要清除画布，而不是清除矩形。
处理已转换的坐标 如果您修改了变换矩阵（例如使用缩放，旋转或平移），则context.clearRect（0,0，canvas.width，canvas.height）可能无法清除画布的整个可见部分。
以下是如何操作：
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
希望这有帮助！ ;）
答案 1 :(得分：1)
要了解画布和不同类型的上下文，请参阅MDN。我们正在使用2d上下文。有关CanvasRenderingContext2D中的详细信息和可用方法，您可以访问the link。
注意：运行代码段时，如果输入不正确，请务必向下滚动输出。有一个＆＃34; Clear＆＃34;要删除的按钮。
我添加的代码中的关键点是
mounted: function() {
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
this.canvas = canvas;
this.ctx = ctx;
}
new Vue({
el: '#app',
data: {
st: 50,
ic: 10
},
mounted: function() {
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
this.canvas = canvas;
this.ctx = ctx;
},
methods: {
dclick: function(e) {
this.ctx.rect = {
startX: 25,
startY: 100,
w: (this.canvas.width - 50),
h: 300,
}
this.draw();
},
draw: function() {
for (let i = 0; i < this.st; i += this.ic) {
this.ctx.beginPath();
this.ctx.moveTo(0, i);
this.ctx.lineTo(500, i);
this.ctx.stroke();
this.ctx.closePath();
this.ctx.fillStyle = "#222222";
this.ctx.fillRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);
//this.drawHandles();
}
},
clear: function() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
});<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<div class="cv">
<canvas style='border:1px solid;' v-on:dblclick="dclick" id="canvasId" class="canvas" width="400" height="200"></canvas>
<canvas class="back" width="150" height="700" style="border:1px solid red"></canvas>
<button v-on:click="dclick">
Draw
</button>
<button v-on:click="clear">
Clear
</button>
</div>
<p style='margin-top: 100px'>-- Spacer--</p>
</div>
您可以根据上述代码段根据需要更新所有代码。希望这会有所帮助!!
更新：根据您的代码笔修改代码。添加了一个标记cleared来重绘控件。
<html>
<head>
<title>Test</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
The CANVAS DEMO
<div class="cv">
<canvas style='border:1px solid;' v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" @dblclick="dclick" id="rect" class="rect" width="150" height="700"></canvas>
<button v-on:click="clear">
Clear
</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
rect : {},
drag : false,
closeEnough : 10,
st : 0,
ic : 0,
mouseX : 0,
mouseY : 0,
dragTL : false,
dragBL : false,
dragTR : false,
dragBR : false,
cv2: '',
ln: 0,
cleared: true
}
},
mounted: function () {
this.getVal(10);
this.draw();
},
methods: {
checkCloseEnough: function (p1, p2) {
return Math.abs(p1 - p2) < this.closeEnough;
},
getVal: function (x) {
this.canvas2 = document.getElementById('rect');
this.ctx2 = this.canvas2.getContext('2d');
this.st = this.canvas2.height;
this.ic = (this.st / x);
},
draw: function () {
this.ctx2.fillStyle = "#222222";
this.ctx2.fillRect(this.ctx2.rect.startX, this.ctx2.rect.startY, this.ctx2.rect.w, this.ctx2.rect.h);
this.drawHandles();
},
drawHandles: function () {
this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY, this.closeEnough); //top left corner
//drawCircle(rect.startX + rect.w, rect.startY, closeEnough);
//drawCircle(rect.startX + rect.w, rect.startY + rect.h, closeEnough);
this.drawCircle(this.ctx2.rect.startX + this.ctx2.rect.w/2, this.ctx2.rect.startY + this.ctx2.rect.h, this.closeEnough);
},
drawCircle: function (x, y, radius) {
this.ctx2.fillStyle = "#FF0000";
this.ctx2.beginPath();
this.ctx2.arc(x, y, radius, 0, 2 * Math.PI);
this.ctx2.closePath();
this.ctx2.fill();
},
checkCloseEnough: function (p1, p2) {
return Math.abs(p1 - p2) < this.closeEnough;
},
mouseDown: function (event) {
if(this.cleared) return;
this.mouseX = event.pageX - this.canvas2.offsetLeft;
this.mouseY = event.pageY - this.canvas2.offsetTop;
// if there isn't a rect yet
if (this.ctx2.rect.w === undefined) {
this.ctx2.rect.startX = this.mouseY;
this.ctx2.rect.startY = this.mouseX;
this.dragBR = true;
}
if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY)) {
this.dragTL = true;
}
else if (this.checkCloseEnough(this.mouseX, this.ctx2.rect.startX + this.ctx2.rect.w/2) && this.checkCloseEnough(this.mouseY, this.ctx2.rect.startY + this.ctx2.rect.h)) {
this.dragBR = true;
}
else {
// handle not resizing
}
this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);
this.draw();
},
mouseMove: function (event) {
if(this.cleared) return;
this.mouseX = event.pageX - this.canvas2.offsetLeft;
this.mouseY = event.pageY - this.canvas2.offsetTop;
if (this.dragTL) {
//rect.w += rect.startX - mouseX;
this.ctx2.rect.h += this.ctx2.rect.startY - this.mouseY;
//rect.startX = mouseX;
this.ctx2.rect.startY = this.mouseY;
}
else if (this.dragBR) {
//rect.w = Math.abs(rect.startX - mouseX);
this.ctx2.rect.h = Math.abs(this.ctx2.rect.startY - this.mouseY);
}
this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);
this.draw();
},
mouseUp: function () {
if(this.cleared) return;
this.dragTL = false;
this.dragTR = false;
this.dragBL = false;
this.dragBR = false;
},
dclick: function (e) {
this.cleared = false;
console.log("Fires");
e.preventDefault();
this.ctx2.rect = {
startX: 25,
startY: 100,
w: (this.canvas2.width - 50),
h: 300,
}
this.draw();
this. ln = this.lines;
this.getVal(10);
},
clear: function () {
this.cleared = true;
this.cv2 = 'rect';
this.canvas2 = document.getElementById(this.cv2);
this.ctx2 = this.canvas2.getContext('2d');
console.log(this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height));
console.log("Clear should run");
},
}
})
</script>
</body>
</html>