使用JQuery启动五彩纸屑效果（画布）

Question

当用户点击Jquery时，我想发起这种五彩纸屑效果，但我不确定如何使用JQuery从外部js文件中轻松实现这一点？

http://codepen.io/anon/pen/BpzxL

<磷>氮

UM_CONFETTI = 350
COLORS = [[85,71,106], [174,61,99], [219,56,83], [244,92,68], [248,182,70]]
PI_2 = 2*Math.PI


canvas = document.getElementById "world"
context = canvas.getContext "2d"
window.w = 0
window.h = 0

resizeWindow = ->
  window.w = canvas.width = window.innerWidth
  window.h = canvas.height = window.innerHeight

.....

这只是代码示例中代码的一小部分。

Answer 1

You can add a click event to the step() function which actually draws the animation.

window.step = ->
    requestAnimationFrame(step)
    context.clearRect(0,0,w,h)
    c.draw() for c in confetti

$('#button').click(step) ->