爱站程序员基地本文实例为大家分享了javascript实现点击产生随机图形的具体代码，供大家参考，具体内容如下
点击产生随机图形
效果如下：
用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();}
点击产生随机图形的效果完成了！
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- JavaScript多种图形实现代码实例
