点击产生随机图形

最新推荐文章于 2022-12-24 20:05:41 发布

半成熟、

最新推荐文章于 2022-12-24 20:05:41 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/bs775926015/article/details/113050440

版权

点击产生随机图形

效果如下：
在这里插入图片描述
用javascript来实现
主要用canvas和随机函数完成各种图形

第一步
在HTML和CSS中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形，第二个按钮用来清除产生的所有图形。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            border: solid 1px red;
            display: block;
            margin: 0 auto;
        }
        #father{
            width: 200px;
            margin:0 auto;
            
        }
        #btn{
            margin-right: 40px;
            cursor: pointer;
        }
        #cle{
            cursor: pointer;
        }
    </style>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <div id="father">
        <input type="button" id="btn" value="点击生成">
        <input type="button" id="cle" value="点击清除">
    </div>
</body>

第二步
在javascript中分别创建用来随机颜色的函数，点击随机产生图形的函数，点击清除屏幕的函数。

 var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var btn=document.getElementById("btn");
    var cle=document.getElementById("cle");

设置图形的随机颜色

  function color(){
        var r=Math.floor(Math.random()*255);
        var g=Math.floor(Math.random()*255);
        var b=Math.floor(Math.random()*255);
        var a=Math.random();
        var bg="rgba("+r+","+g+","+b+","+a+")";
        return bg;
    }

设置点击按钮随机产生图形的函数，第一种实心和空心矩形，第二种实心和空心圆，第三种直线，它们的位置和大小分别写随机函数，再分别加上canvas代码，用来画图形，如context.beginPath()-context closePath()。

 btn.onclick=function(){
        var random=Math.floor(Math.random()*3+1);
        if(random==1){
            var rectr=Math.floor(Math.random()*2);
            var rectx=Math.floor(Math.random()*600);
            var recty=Math.floor(Math.random()*600);
            var rectwidth=Math.floor(Math.random()*200+200);
            var rectheight=Math.floor(Math.random()*200+200);
            if(rectr== 0){
                context.beginPath();
                context.strokeStyle=color();
                context.strokeRect(rectx,recty,rectwidth,rectheight)
                context.closePath();
            }
            else {
                context.beginPath();
                context.fillStyle=color();
                context.fillRect(rectx,recty,rectwidth,rectheight);
                context.closePath();
            }
        }
        else if(random == 2){
            var arcr=Math.floor(Math.random()*2);
            var arcx=Math.floor(Math.random()*600);
            var arcy=Math.floor(Math.random()*600);
            var arcr=Math.floor(Math.random()*300);
            if(arcr==0){
                context.beginPath();
                context.strokeStyle=color();
                context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
                context.stroke();
                context.closePath();
            }
        
            else{
                context.beginPath();
                context.fillStyle=color();
                context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
                context.fill();
                context.closePath();
            }
        }
        else if(random==3){
            var movex=Math.floor(Math.random()*600);
            var movey=Math.floor(Math.random()*600);
            var linex=Math.floor(Math.random()*600);
            var liney=Math.floor(Math.random()*600);
            var linew=Math.floor(Math.random()*20);
            context.beginPath();
            context.strokeStyle=color();
            context.moveTo(movex,movey);
            context.lineTo(linex,liney);
            context.lineWidth=linew;
            context.stroke();
            context.closePath();
        }
    }

第三步
最后创建点击清除屏幕的按钮函数,根据创建的屏幕大小，在canvas中添加 context.clearRect(0,0,600,600);可实现清除屏幕。

cle.onclick=function(){
        context.beginPath();
        context.clearRect(0,0,600,600);
        context.closePath();
    }

点击产生随机图形的效果完成了！

半成熟、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫