介绍 & lt; style>
*{才能
,,,保证金:0;
,,,填充:0;
,,}
#帆布{才能
,,,边界:solid 1 px 红色;
,,,显示:块;
,,,保证金:0,汽车;
,,}
#父亲{才能
,,,宽度:200 px;
,,保证金:0,汽车;
,,
,,}
# btn{才能
,,,margin-right: 40像素;
,,,光标:指针;
,,}
# cle{,才能
,,,光标:指针;
,,}
& lt;/style> & lt; body>
,& lt; canvas id=癱anvas",宽度=?00“,身高=?00“祝辞& lt;/canvas>
,& lt; div id=癴ather"比;
& lt;才能input 类型=癰utton", id=癰tn",价值=https://www.yisu.com/zixun/钡慊魃?>
var 帆布=. getelementbyid (“canvas");
,var 上下文=canvas.getContext (“2 d");
,var btn=. getelementbyid (“btn");
,var 继续教育=. getelementbyid (“cle"); function 颜色(){
var 才能;r=Math.floor (math . random () * 255);
var 才能;g=Math.floor (math . random () * 255);
var 才能;b=Math.floor (math . random () * 255);
var 才能;=math . random ();
var 才能;bg=皉gba (“+ r +“,“+ g +”、“+ b +”、“+ +”)“;
return 才能;天然气;
以前,} btn.onclick=function () {
var 才能;随机=Math.floor (math . random () * 3 + 1);
如果才能(随机==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);
,,如果(rectr==, 0) {
,,,context.beginPath ();
,,,context.strokeStyle=颜色();
,,,context.strokeRect (rectx、recty rectwidth, rectheight)
,,,context.closePath ();
,,}
,,else {
,,,context.beginPath ();
,,,context.fillStyle=颜色();
,,,context.fillRect (rectx, recty, rectwidth rectheight);
,,,context.closePath ();
,,}
,,}
else 才能;如果(==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);
,,如果(arcr==0) {
,,,context.beginPath ();
,,,context.strokeStyle=颜色();
,,,context.arc (arcx, arcy arcr 0 2 * Math.PI,假);
,,,context.stroke ();
,,,context.closePath ();
,,}
,,
其他,,{
,,,context.beginPath ();
,,,context.fillStyle=颜色();
,,,context.arc (arcx, arcy arcr 0 2 * Math.PI,假);
,,,context.fill ();
,,,context.closePath ();
,,}
,,}
else 才能;如果(随机==3){
,,var movex=Math.floor (math . random () * 600);
,,var movey=Math.floor (math . random () * 600);
,,var linex=Math.floor (math . random () * 600);
,,var 细的=Math.floor (math . random () * 600);
,,var linew=Math.floor (math . random () * 20);
,,context.beginPath ();
,,context.strokeStyle=颜色();
,,context.moveTo (movex movey);
,,context.lineTo (linex,细的);
,,context.lineWidth=linew;
,,context.stroke ();
,,context.closePath ();
,,}
} cle.onclick=function () {
context.beginPath才能();
context.clearRect才能(0,0600600);
context.closePath才能();
null
今天就跟大家聊聊有关利用javascript怎么实现一个生成随机图形功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>第一步
在HTML和CSS中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形,第二个按钮用来清除产生的所有图形。
设置图形的随机颜色
设置点击按钮随机产生图形的函数,第一种实心和空心矩形,第二种实心和空心圆,第三种直线,它们的位置和大小分别写随机函数,再分别加上画布代码,用来画图形,如context.beginPath()上下文closePath ()。
<强>第三步
最后创建点击清除屏幕的按钮函数,根据创建的屏幕大小,在画布中添加context.clearRect(0, 0600600);可实现清除屏幕。
