改变五彩纸屑画布效果的形状

Question

我希望为网站的目标网页实施五彩纸屑效果，并在这里偶然发现完美的首发：https://codepen.io/linrock/pen/Amdhr但是，我需要将五彩纸屑的形状编辑为小圆形而不是圆形：< / p>

我尝试过改变：

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。