如何删除画布 html 中的点？

x由于您在 ( , y) 位置 ( 100px, 100px) 处绘制了直径为的红色圆圈6px，因此它所占的面积为：x      : 100 - (6 / 2)y      : 100 - (6 / 2)width  : 6height : 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 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() {  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>

如何删除画布 html 中的点？

2回答