挖一些使用過程中的坑
畫布,canvas,可以理解為小時(shí)候玩的粘貼紙,我們先需要畫出"無形"的路徑,如rect/arc/lineTo,再通過fill/stroke渲染成可見的圖形顯示到屏幕上.無形或可見的路徑\內(nèi)容繪制之后,再去修改畫布,只會(huì)影響到后面繪制的內(nèi)容.
轉(zhuǎn)換的各類操作,只對其后的繪制(包括路徑和渲染)起作用.對之前已經(jīng)繪制的路徑\渲染過的無效.
beginPath,會(huì)重置前面繪制的路徑,是不是叫clearAndRestartPath更清晰些?
moveTo,并不是字面意義的移動(dòng)"畫筆",而應(yīng)理解為跳到某點(diǎn)再去畫.它不會(huì)生成路徑.是不是叫jumpTo更準(zhǔn)確些?
closePath,并不是某些文章里提到的是必須要用的.close此處的意思,是"閉合",會(huì)創(chuàng)建從路徑尾點(diǎn)到開始點(diǎn)的路徑的.
別忘了對save restore的使用,結(jié)合對畫布的各類轉(zhuǎn)換操作.
畫布是以(0,0)為原點(diǎn)進(jìn)行rotate的,注意要畫的img的旋轉(zhuǎn)原點(diǎn),可以用photoshop找出來.
setTransform(1,?0,?0,?1,?0,?0),可以實(shí)現(xiàn)對轉(zhuǎn)換操作的重置,注意參數(shù).
矩形框是否為空
碰撞
圓
圓的碰撞判斷很簡單,2個(gè)圓的圓心距離是否小于2圓的半徑之和.
矩形
矩形的碰撞判斷,如下圖:
不規(guī)則
不規(guī)則的圖像,一般源自img.
具體操作,是在上面矩形碰撞為true的情況下,再進(jìn)一步判斷重疊的矩形框里,在繪制1張img,和2張img的情況下,檢查每一個(gè)像素的alpha值有無變化.
遺留問題
canvas似乎無法對局部的圖案或單獨(dú)的路徑\繪制留下可溯源操作的方式.是否自己弄一套API出來?
transform()?setTransform()?的參數(shù),特別是b和c,不太明白適用場景.
canvas的所有api,都搞清楚了,也只是相當(dāng)于學(xué)會(huì)了用筆.真正要畫出什么樣的圖,就是一般人和畫家的區(qū)別.要學(xué)的無窮多.比如3D的\光影效果\復(fù)雜的動(dòng)畫\視頻.
