欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现点击产生随机图形

程序员文章站 2022-04-23 20:29:30
本文实例为大家分享了javascript实现点击产生随机图形的具体代码,供大家参考,具体内容如下点击产生随机图形效果如下:用javascript来实现主要用canvas和随机函数完成各种图形第一步在h...

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

点击产生随机图形

效果如下:

javascript实现点击产生随机图形

用javascript来实现

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

第一步

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

第二步

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

设置图形的随机颜色

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

第三步

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

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

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

相关标签: js 随机图形