如何删除画布 html 中的点？

Question

首先，我尝试了与该主题相关的所有问题和答案。此外，我尝试了相关问题并尝试解决但没有成功。所以请仔细阅读我的问题。问题：在没有透明画布的情况下仅移除红点。我只想删除 Red Dotes 而不是 Full Canvas Remove or Reload 。const canvas = document.getElementById('canvas');const context = canvas.getContext('2d');    context.beginPath();context.arc(100, 100, 3, 0, Math.PI * 2, true); // Outer circlecontext.lineWidth = 0;context.fillStyle = "red";context.fill();context.beginPath();context.arc(36, 100, 3, 0, Math.PI * 2, true); // Outer circlecontext.lineWidth = 0;context.fillStyle = "Orange";context.fill();context.beginPath();context.arc(123, 100, 3, 0, Math.PI * 2, true); // Outer circlecontext.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

由于现有的答案已经证明了面向对象的格言......

• “我要了一根香蕉，结果在丛林里遇到了一只拿着香蕉的大猩猩。” ,

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

原因：与复杂性的斗争。

复杂性是编码员的头号敌人，添加不必要的抽象层、复制现有行为、预测未定义的需求，都会增加复杂性。

认为如果只有不到 100 行可能无关紧要，对于大型项目，额外的代码会很快加起来，每一行都是额外的错误来源。

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

结果是功能几乎相同的代码减少了一半，

例子

• 使用Array原型实现层

• circledrawable通过将类型传递给构造函数来继承。

• 按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>