如何删除canvas html中的点

Question

首先，我试了所有的问题&与此主题相关的答案。此外，我尝试了相关的问题，并试图解决它，但没有成功。所以请仔细阅读我的问题。

问题：仅删除红色没有清晰画布的点。

我只想移除红点而不是完整画布移除或重新加载

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(36, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "Orange";
context.fill();
context.beginPath();
context.arc(123, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "Green";
context.fill();
function removeRedDot(){
// remove code
alert('Remove Red Dot');
}

#canvas{
border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Approach the circle with the mouse</h4> <button onclick="removeRedDot()"> Red Remove Dot</button>
<canvas id="canvas" width=300 height=200></canvas>

Answer 1

由于您在(x，y(位置(100px，100px(绘制了直径为6px的红色圆圈，因此它所占的面积为：

x      : 100 - (6 / 2)
y      : 100 - (6 / 2)
width  : 6
height : 6

您可以使用clearRect方法清除画布的一部分。

context.clearRect(97, 97, 6, 6);

如果画布有背景，则需要清除整个画布并重新绘制除红点之外的所有内容，或者可以调用fillRect……假设context.fillStyle设置为背景色。

context.fillRect(97, 97, 6, 6);

在画红点之前，你必须知道红点画在哪里(以及它的大小(。

编辑：请参阅下面演示的OOP示例！

---

演示

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(36, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "Orange";
context.fill();
context.beginPath();
context.arc(123, 100, 3, 0, Math.PI * 2, true); // Outer circle
context.lineWidth = 0;
context.fillStyle = "Green";
context.fill();
function removeRedDot() {
context.clearRect(97, 97, 6, 6);
alert('Removed Red Dot');
}

#canvas {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Approach the circle with the mouse</h4> <button onclick="removeRedDot()"> Red Remove Dot</button>
<canvas id="canvas" width=300 height=200></canvas>

---

OOP救援

更好的方法是了解画布外的红点渲染。您可以将画布上下文封装在一个管理层和可绘制内容的类中。

const ctx = document.getElementById('canvas').getContext('2d');
const main = () => {
const canvas = new Canvas(ctx);
const layer = canvas.addLayer();
const circles = [
new Circle({ x: 50, y: 50 }, 3, 'red'),
new Circle({ x: 100, y: 100 }, 6, 'green'),
new Circle({ x: 150, y: 150 }, 12, 'blue')
];
layer.add(...circles);
canvas.render();

// After 2 second, remove the red dot and re-render.
setTimeout(() => {
alert('Removing "red" circle, and adding a "cyan" circle...');
layer.remove(circles[0]);
layer.add(new Circle({ x: 150, y: 50 }, 8, 'cyan'));
canvas.render();
}, 2000);
};
class Drawable {
constructor(origin) {
this.origin = origin;
}
draw(ctx) { }
}
class Layer {
constructor(name) {
this.name = name;
this.drawables = [];
}
add(...drawables) {
drawables.forEach(drawable => this.drawables.push(drawable));
}
remove(drawableOrIndex) {
if (isNaN(drawableOrIndex)) {
drawableOrIndex = this.drawables.indexOf(drawableOrIndex);
}
if (drawableOrIndex > -1) {
this.drawables.splice(drawableOrIndex, 1);
}
}
render(ctx) {
this.drawables.forEach(drawable => drawable.render(ctx));
}
}
class Canvas {
constructor(ctx) {
this.ctx = ctx;
this.layers = [];
}
addLayer(name) {
const newLayer = new Layer(name || 'layer-' + this.layers.length);
this.layers.push(newLayer);
return newLayer;
}
getLayer(nameOrIndex) {
return isNaN(nameOrIndex)
? this.layers.find(layer => layer.name === nameOrIndex)
: this.layers[nameOrIndex];
}
render() {
const { width, height } = this.ctx.canvas;
this.ctx.clearRect(0, 0, width, height);
this.layers.forEach(layer => layer.render(this.ctx));
}
}
class Circle extends Drawable {
constructor(origin, radius, color) {
super(origin);
this.radius = radius;
this.color = color;
}
render(ctx) {
const { x, y } = this.origin;
const diameter = this.radius * 2;
ctx.save();
ctx.beginPath();
ctx.arc(x, y, this.radius, 0, Math.PI * 2, true);
ctx.lineWidth = 0;
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
main();

#canvas {
border: 1px solid black;
}

<canvas id="canvas" width=300 height=200></canvas>

Answer 2

由于现有的答案已经证明了OO格言。。。

• "我要了一根香蕉，但丛林里有一只大猩猩拿着一根香蕉">

我添加这个答案是为了演示一种更简洁的JavaScript独特OO方法。

原因：与复杂性的斗争。

复杂性是程序员的头号敌人，增加了不必要的抽象层，复制了现有的行为，预测了未定义的需求，所有这些都增加了复杂性。

虽然只有不到100行可能并不重要，但对于大型项目来说，额外的代码会很快累积起来，每一行都是额外的错误来源。

JavaScript提供了一个简单且非常灵活的OO模型，强调通过特殊对象构建和扩展实现多态性。它还有大量的编码快捷方式，这些快捷方式大大减少了实现行为所需的行数

结果是具有几乎相同功能的代码数量的一半

示例

• 使用Array原型实现层
• circle通过将类型传递给构造函数来继承drawable
• 通过color而不是索引或引用删除

const ctx = canvas.getContext("2d");
const P2 = (x = 0, y = 0) => ({x,y});
const Drawable = (pos, color, size = 10, type = Circle) => ({pos, size, color, ...type});
const Circle = {
draw(ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
};
const drawables = Object.assign([], {
draw(ctx) { for (const d of this) { d.draw(ctx) } },
remove(color) {
const idx = this.findIndex(d => d.color === color);
return (idx > -1 && (this.splice(idx, 1)[0])) || undefined;
},
}
);
drawables.push(...[...document.querySelectorAll("#buttons button")].map((but, idx)=>
Drawable(P2(100 + idx * 100, 50), but.dataset.color)
));
drawables.draw(ctx);   
buttons.addEventListener("click", e => {
if (drawables.remove(e.target.dataset.color)) {
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
drawables.draw(ctx);
}
});

<canvas id="canvas" width="400" height="100"></canvas>
<div id="buttons">
<button data-color="red">Remove Red</button>
<button data-color="green">Remove Green</button>
<button data-color="blue">Remove Blue</button>
</div>

(我还要补充一点，Polyhury先生的代码没有错(