javascript - 改变五彩纸屑 Canvas 效果的形状

Question

我希望为网站的登陆页面实现五彩纸屑效果，并在这里偶然发现了完美的启动器:https://codepen.io/linrock/pen/Amdhr但是，我需要将五彩纸屑的形状编辑为小矩形而不是圆形:

我尝试过改变:

context.arc(x,y,r,0,PI_2,false) 

到

context.rect(10,10,10,20)

这会在一页上产生一个五彩纸屑，其形状是我希望所有的形状，但正如您将看到的，它消除了整个五彩纸屑效果。我非常确定我需要编辑 drawCircle 才能实现我想要的效果。

Answer 1

只需更改:

drawCircle = (x,y,r,style) ->
  context.beginPath()
  context.arc(x,y,r,0,PI_2,false)
  context.fillStyle = style
  context.fill()

至

drawCircle = (x,y,r,style) ->
  context.fillStyle = style
  context.fillRect(x,y,r,r)
  context.fill()

编辑 1

请注意，这是 CoffeeScript，而不是 JavaScript。