Canvas鏈式操作

2022-03-05 11:24:15 字數 878 閱讀 7074

canvas有個非常麻煩的地方就是不支援鏈式操作,導致書寫極其繁瑣,剛剛學習了canvas的鏈式操作。

下面是**

改進之後的寫法,犀利得多啊!

1.canvas = document.queryselector('#canvas')

2.3.

class

c2d4.

(canvas) ->

5.@context = canvas.getcontext \2d

6.for

let prop of

@context

7. @[prop] =->

8.if

typeof

@context[prop] is

"function"

9.return

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.

Canvas文字操作

canvas的繪圖環境提供三個方法如 繪製填充文字 filltext 繪製描邊文字 stroketext 繪製文字並返回乙個物件 measure measure 方法返回的物件中包含乙個width屬性,該屬性表達繪製的文字所佔據的寬度 canvas繪圖環境提供三個屬性如 設定稍後繪圖環境所繪製文字的...

canvas畫素操作

獲得乙個包含畫布場景畫素資料的imagedata對像,它代表了畫布區域的物件資料 ctx.getimagedata sx,sy,sw,sh sx 將要被提取的影象資料矩形區域的左上角 x 座標。sy 將要被提取的影象資料矩形區域的左上角 y 座標。sw 將要被提取的影象資料矩形區域的寬度。sh 將要...

js 鏈式操作

elem show css color red 這就是jq裡面的鏈式操作了 是不是很方便啊 可是以前只是用的比較方便 沒仔細了解過是怎麼實現的 被問到了也不知所措所以我就借鑑了下面資料來了解下js的鏈式操作 最常見 的,是j quer y直接返 回thi s的方式 color 最常見的,是 jque...