javascript实现点击产生随机图形

本文实例为大家分享了javascript实现点击产生随机图形的具体代码，供大家参考，具体内容如下

点击产生随机图形

效果如下：

用javascript来实现

主要用canvas和随机函数完成各种图形

第一步

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

第二步

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

设置图形的随机颜色

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

第三步

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。