JSDM

HTML

2
 
1
<canvas></canvas>
2
<p>请将鼠标移动到画布上</p>
!

CSS

xxxxxxxxxx
14
 
1
canvas
2
  background-image: url( http://blogoscoped.com/files/scanimation-cat.png )
3
  background-size: auto
4
  background-repeat: no-repeat
5
  background-position: center center
6
  margin-top: -213px
7
  margin-left: -401px
8
  position: absolute
9
  cursor: ew-resize
10
  top: 50%
11
  left: 50%
12
  width: 803px
13
  height: 426px
14
  
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

44
 
1
class MoireView
2
  
3
  prefs:
4
    fill: "#000"
5
    lineSize: 17
6
    breakSize: 2.45
7
  
8
  init: ->
9
    @.getElements()
10
    @.addListeners()
11
    @.render()
12
    
13
  getElements: ->
14
    @.el = document.getElementsByTagName("canvas")[0]
15
    @.stage = @.el.getContext("2d")
16
    @.stage.fillStyle = @.prefs.fill
17
    @.height = @.el.offsetHeight
18
    @.width = @.el.offsetWidth
19
    
20
  addListeners: ->
21
    @.el.addEventListener "mousemove" , ( e ) =>
22
      @.x = @.width - e.offsetX
23
      
24
  render: ->
25
    setInterval =>
26
      @.drawLines()
27
    , 1000 / 60
28
    
29
  drawLines: ->
30
    i = -@.x
31
    @.el.setAttribute( "width" , @.width )
32
    @.el.setAttribute( "height" , @.height )
33
    while i < @.width
34
      @.stage.moveTo( i , 0 )
35
      @.stage.beginPath()
36
      @.stage.lineTo( i , @.height )
37
      @.stage.lineTo( i + @.prefs.lineSize , @.height )
38
      @.stage.lineTo( i + @.prefs.lineSize , 0 )
39
      @.stage.lineTo( i , 0 )
40
      @.stage.fill()
41
      i += @.prefs.lineSize + @.prefs.breakSize
42
      
43
Scanimation = new MoireView
44
do Scanimation.init
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................