Canvas链式操作

 

 

Canvas 链式操作

canvas有个非常麻烦的地方就是不支持链式操作，导致书写极其繁琐，刚刚学习了canvas的链式操作。

下面是代码

改进之后的写法，犀利得多啊！

1.canvas = document.querySelector('#canvas')
2.
3.class C2D
4.  (canvas) ->
5.    @context = canvas.getContext \2d
6.    for let prop of @context
7.      @[prop] = ->
8.        if typeof @context[prop] is "function"
9.          return @context[prop].apply @context, & or this
10.        @context[prop] = Array.prototype.join.call &
11.        this
12.    this
13.
14.cc =  new C2D canvas
15.cc.beginPath!
16.  .arc 50, 50, 20, Math.PI * 2, false
17.  .fillStyle("red")
18.  .fill!
19.  .stroke!
20.  .beginPath!
21.  .moveTo 100, 100
22.  .lineTo 200, 200
23.  .strokeStyle "lawngreen"
24.  .lineWidth 10
25.  .stroke!
26.