解決方案js:https://pan.baidu.com/s/1jIys2aU
我們使用canvas通常會遇到一個問題就是坐標系的問題,如果按象限來說,一般canvas是在第四象限,但是我們通常都喜歡在第一象限來計算,第二個問題是手機端用canvas繪圖很粗糙,這個在上一章節也說過,今天就根絕這兩個問題,寫一個解決方案:
首先我們html里面的canvas要這么寫:<canvas id="myCanvas" width="750" height="750" layoutwidth="750" ></canvas>其中layoutwidth是表示canvas設計稿的寬度(一般都是按照蘋果6的設計稿,寬度是750),width和height屬性表示在750的設計稿中canvas的實際寬高(建議閱讀本章前,先了解手機下rem的使用,本解決方案參考了rem的解決方案),然后引入我寫的js后,var myCanvas = new carvasCloth("myCanvas"),然后就可以繪圖了,我是這樣使用的 把我寫的解決方案js作為一個基類,然后另寫一個針對特定業務的js繼承這個基類,然后再這個特定的js里面實現具體的繪圖操作
this.gY 是一個方法,返回的是按照第一象限下y的坐標,比如說我想畫一個點{x:10,y:10}你如果直接畫,那是按照第四象限來畫的,這樣寫:{x:10,y:this.gY(10)}就是按照第一象限來了
this.gYAdd 有時候我想計算兩個已經計算的坐標的相加值,this.gYAdd(this.gY(10),this.gY(20))
this.gYsubtract 有時候我想計算兩個已經計算的坐標的相減值,this.gYsubtract(this.gY(10),this.gY(20))
this.gX 返回是X的坐標
this.gW返回單位寬度內的實際寬度 this.gW(1)表示在畫布內一單位寬度的實際寬度