<canvas></canvas>
<p>请将鼠标移动到画布上</p>
xxxxxxxxxx
canvas
background-image: url( http://blogoscoped.com/files/scanimation-cat.png )
background-size: auto
background-repeat: no-repeat
background-position: center center
margin-top: -213px
margin-left: -401px
position: absolute
cursor: ew-resize
top: 50%
left: 50%
width: 803px
height: 426px
class MoireView
prefs:
fill: "#000"
lineSize: 17
breakSize: 2.45
init: ->
@.getElements()
@.addListeners()
@.render()
getElements: ->
@.el = document.getElementsByTagName("canvas")[0]
@.stage = @.el.getContext("2d")
@.stage.fillStyle = @.prefs.fill
@.height = @.el.offsetHeight
@.width = @.el.offsetWidth
addListeners: ->
@.el.addEventListener "mousemove" , ( e ) =>
@.x = @.width - e.offsetX
render: ->
setInterval =>
@.drawLines()
, 1000 / 60
drawLines: ->
i = -@.x
@.el.setAttribute( "width" , @.width )
@.el.setAttribute( "height" , @.height )
while i < @.width
@.stage.moveTo( i , 0 )
@.stage.beginPath()
@.stage.lineTo( i , @.height )
@.stage.lineTo( i + @.prefs.lineSize , @.height )
@.stage.lineTo( i + @.prefs.lineSize , 0 )
@.stage.lineTo( i , 0 )
@.stage.fill()
i += @.prefs.lineSize + @.prefs.breakSize
Scanimation = new MoireView
do Scanimation.init