javascript实现点击产生随机图形
程序员文章站
2022-04-23 20:29:30
本文实例为大家分享了javascript实现点击产生随机图形的具体代码,供大家参考,具体内容如下点击产生随机图形效果如下:用javascript来实现主要用canvas和随机函数完成各种图形第一步在h...
本文实例为大家分享了javascript实现点击产生随机图形的具体代码,供大家参考,具体内容如下
点击产生随机图形
效果如下:
用javascript来实现
主要用canvas和随机函数完成各种图形
第一步
在html和css中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形,第二个按钮用来清除产生的所有图形。
第二步
在javascript中分别创建用来随机颜色的函数,点击随机产生图形的函数,点击清除屏幕的函数。
设置图形的随机颜色
设置点击按钮随机产生图形的函数,第一种实心和空心矩形,第二种实心和空心圆,第三种直线,它们的位置和大小分别写随机函数,再分别加上canvas代码,用来画图形,如context.beginpath()-context closepath()。
第三步
最后创建点击清除屏幕的按钮函数,根据创建的屏幕大小,在canvas中添加 context.clearrect(0,0,600,600);可实现清除屏幕。
点击产生随机图形的效果完成了!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读