画板画圆

最新推荐文章于 2025-04-27 17:25:07 发布

原创最新推荐文章于 2025-04-27 17:25:07 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML与JavaScript在画板上生成并移除带编号圆的方法。通过面向对象的方式创建圆，并实现了点击按钮生成圆、点击圆移除圆的功能。同时确保生成的圆不会超出画板边界。

要求：在面板上画圆，此圆有数字表示，点击该圆可以消除掉。

效果图.jpg

遇到的问题

一个圆有什么属性
如何点击一个button生成一个圆
点击该圆如何消除掉该圆
生成的圆在画板里面，没有漏出去

解决方案如下

一个圆有什么属性构造

 #disc{
      border: 1px solid red;
      width: 120px;
      height: 120px;
      border-radius: 60px;
  } //半径应该为直径的一半，也就是width的一半

如何点击一个button生成一个圆

采用面向对象的方法来处理

  var number=1;
  function drawDisc(){
    var disc1=new disc($("canvas"),number);
    if(disc1.isValid()){
     disc1.draw();
     number++;
    }
  }

点击该圆如何消除掉该圆

 discObj.onclick=function(){
   this.parentNode.removeChild(this);
   };

生成的圆在画板里面，没有漏出去

判断是否合法

this.isValid=function (argument) {  
    if (this.centerX-this.radius<122) { //left 要大于面板的左侧
    return false;
    }
    if(this.centerY-this.radius<83){ //top要大于面板的顶部
    return false;
      }
      return true;
    }

总结
开始不知道怎么下手是因为不知道如何生成一个圆，就查了https://bootcss.com文档，知道圆生成的属性，然后问题就是如何点击一个button生成一个圆，用到了面向对象，new一个实例出来，在构造函数里面来描述一个圆。注意圆的半径应该是width和height的一半。然后是消除该圆也简单，用到removeChild()，最后是范围合理检查，被老师写的误导了很久，老师写的看不懂，理解他的思路理解了很久还是没有明白，索性就自己动脑想了一下，发现效果一下，还简单，就用自己的。