解決方案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)表示在畫布內一單位寬度的實際寬度

轉載于:https://www.cnblogs.com/mrzhu/p/6762605.html

總結

以上是生活随笔為你收集整理的canvas手机端绘图解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。