javascript实现点击产生随机图形
这篇文章主要为大家详细介绍了javascript实现点击产生随机图形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现点击产生随机图形的具体代码,供大家参考,具体内容如下
点击产生随机图形
效果如下:
用javascript来实现
主要用canvas和随机函数完成各种图形
第一步
在HTML和CSS中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形,第二个按钮用来清除产生的所有图形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> |
1 2 3 4 5 6 7 | < 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中分别创建用来随机颜色的函数,点击随机产生图形的函数,点击清除屏幕的函数。
1 2 3 4 | var canvas=document.getElementById( "canvas" ); var context=canvas.getContext( "2d" ); var btn=document.getElementById( "btn" ); var cle=document.getElementById( "cle" ); |
设置图形的随机颜色
1 2 3 4 5 6 7 8 | 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()。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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);可实现清除屏幕。
1 2 3 4 5 | cle.onclick= function (){ context.beginPath(); context.clearRect(0,0,600,600); context.closePath(); } |
点击产生随机图形的效果完成了!
以上就是本文的全部内容,希望对大家的学习有所帮助