js实现随机圆与矩形功能

本文实例为大家分享了js实现随机圆与矩形功能的具体代码，供大家参考，具体内容如下

1、节点操作版

 
 
 


 *{
  margin: 0;padding: 0;
 }
 html,body,.box{
  width: 100%;height: 100%;
 }
 #content{
  background: #f5f5f5;
 }
 .circle{
  border-radius: 50%;position: absolute;
 }
 .rect{
  position: absolute;
 }
 .btn{
  position: fixed;top: 0;left: 0;
 }


 
 
  创建随机圆
  创建随机矩形
 

2、鼠标拖动版本（矩形版本类似）

 
 
 


 *{
  margin: 0;padding: 0;
 }
 html,body,.box{
  width: 100%;height: 100%;
 }
 #content{
  background: #f5f5f5;
 }
 .circle{
  border-radius: 50%;position: absolute;
 }


 

3、canvas版本

 
 
 
 
 
  #canvas{margin: 0 auto;background: #000;box-shadow: 0 0 10px #000;}
 


 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。