• 售前

  • 售后

热门帖子
入门百科

javascript实现点击产生随机图形

[复制链接]
shelly65321 显示全部楼层 发表于 2021-10-25 19:36:18 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了javascript实现点击产生随机图形的具体代码,供各人参考,具体内容如下
点击产生随机图形
效果如下:

用javascript来实现
告急用canvas和随机函数完成各种图形
第一步
在HTML和CSS中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形,第二个按钮用来清除产生的全部图形。
  1. <style>
  2.   *{
  3.    margin: 0;
  4.    padding: 0;
  5.   }
  6.   #canvas{
  7.    border: solid 1px red;
  8.    display: block;
  9.    margin: 0 auto;
  10.   }
  11.   #father{
  12.    width: 200px;
  13.    margin:0 auto;
  14.    
  15.   }
  16.   #btn{
  17.    margin-right: 40px;
  18.    cursor: pointer;
  19.   }
  20.   #cle{
  21.    cursor: pointer;
  22.   }
  23. </style>
复制代码
  1. <body>
  2. <canvas id="canvas" width="600" height="600"></canvas>
  3. <div id="father">
  4.   <input type="button" id="btn" value="点击生成">
  5.   <input type="button" id="cle" value="点击清除">
  6. </div>
  7. </body>
复制代码
第二步

在javascript中分别创建用来随机颜色的函数,点击随机产生图形的函数,点击清除屏幕的函数。
  1. var canvas=document.getElementById("canvas");
  2. var context=canvas.getContext("2d");
  3. var btn=document.getElementById("btn");
  4. var cle=document.getElementById("cle");
复制代码
设置图形的随机颜色
  1. function color(){
  2.   var r=Math.floor(Math.random()*255);
  3.   var g=Math.floor(Math.random()*255);
  4.   var b=Math.floor(Math.random()*255);
  5.   var a=Math.random();
  6.   var bg="rgba("+r+","+g+","+b+","+a+")";
  7.   return bg;
  8. }
复制代码
设置点击按钮随机产生图形的函数,第一种实心和空心矩形,第二种实心和空心圆,第三种直线,它们的位置和巨细分别写随机函数,再分别加上canvas代码,用来画图形,如context.beginPath()-context closePath()。
  1. btn.onclick=function(){
  2.   var random=Math.floor(Math.random()*3+1);
  3.   if(random==1){
  4.    var rectr=Math.floor(Math.random()*2);
  5.    var rectx=Math.floor(Math.random()*600);
  6.    var recty=Math.floor(Math.random()*600);
  7.    var rectwidth=Math.floor(Math.random()*200+200);
  8.    var rectheight=Math.floor(Math.random()*200+200);
  9.    if(rectr== 0){
  10.     context.beginPath();
  11.     context.strokeStyle=color();
  12.     context.strokeRect(rectx,recty,rectwidth,rectheight)
  13.     context.closePath();
  14.    }
  15.    else {
  16.     context.beginPath();
  17.     context.fillStyle=color();
  18.     context.fillRect(rectx,recty,rectwidth,rectheight);
  19.     context.closePath();
  20.    }
  21.   }
  22.   else if(random == 2){
  23.    var arcr=Math.floor(Math.random()*2);
  24.    var arcx=Math.floor(Math.random()*600);
  25.    var arcy=Math.floor(Math.random()*600);
  26.    var arcr=Math.floor(Math.random()*300);
  27.    if(arcr==0){
  28.     context.beginPath();
  29.     context.strokeStyle=color();
  30.     context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
  31.     context.stroke();
  32.     context.closePath();
  33.    }
  34.   
  35.    else{
  36.     context.beginPath();
  37.     context.fillStyle=color();
  38.     context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
  39.     context.fill();
  40.     context.closePath();
  41.    }
  42.   }
  43.   else if(random==3){
  44.    var movex=Math.floor(Math.random()*600);
  45.    var movey=Math.floor(Math.random()*600);
  46.    var linex=Math.floor(Math.random()*600);
  47.    var liney=Math.floor(Math.random()*600);
  48.    var linew=Math.floor(Math.random()*20);
  49.    context.beginPath();
  50.    context.strokeStyle=color();
  51.    context.moveTo(movex,movey);
  52.    context.lineTo(linex,liney);
  53.    context.lineWidth=linew;
  54.    context.stroke();
  55.    context.closePath();
  56.   }
  57. }
复制代码
第三步
末了创建点击清除屏幕的按钮函数,根据创建的屏幕巨细,在canvas中添加 context.clearRect(0,0,600,600);可实现清除屏幕。
  1. cle.onclick=function(){
  2.   context.beginPath();
  3.   context.clearRect(0,0,600,600);
  4.   context.closePath();
  5. }
复制代码
点击产生随机图形的效果完成了!
以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作