画板画圆

朴灿烈づ我的快乐病毒、 2022-06-02 08:29 257阅读 0赞

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

效果图.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()，最后是范围合理检查，被老师写的误导了很久，老师写的看不懂，理解他的思路理解了很久还是没有明白，索性就自己动脑想了一下，发现效果一下，还简单，就用自己的。

> 代码库

https://github.com/hejiahao/HTML-front