在HTML5中，Canvas是一個圖形繪製區域，它是一個HTML標籤，用於在網頁上動態渲染2D和3D圖形。而Context是Canvas的上下文，它是用於在Canvas上進行繪圖的接口。具體來說，有2D Context和3D Context（WebGL），其中最常用的是2D Context。
當你在HTML中創建一個<canvas>元素時，你可以通過JavaScript的canvas.getContext('2d')方法獲取到2D繪圖環境。這個2D Context提供了一系列的方法和屬性，如fillRect、strokeRect、drawImage等，用於在Canvas上繪製圖形、文本、圖片等。
因此，Canvas可以看作是一個畫布，而Context就像是畫家手中的畫筆，通過Context提供的各種方法，我們可以在Canvas上繪製出想要的圖形。沒有Context，Canvas就無法進行圖形繪製；反之，沒有Canvas，Context也就失去了存在的意義。它們是相輔相成的關係。
<canvas id="myCanvas" type="2d" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
class="myCanvas" disable-scroll="false" @touchstart="touchStart" @touchmove="touchMove"
@touchend="touchEnd">
在Vue3中，ref和getElementById（或querySelector等方法）都是用來獲取DOM元素，但它們之間有顯著的區別：
-
響應式性：
ref：在Vue3中，ref返回的是一個響應式的對象，它的.value屬性直接引用了DOM元素。當你在Vue的計算邏輯中使用ref時，Vue會追蹤這個引用的變化，使得你可以直接修改ref.value來改變DOM元素的屬性，並且這些變化會被Vue的響應式系統捕獲，從而觸發視圖的更新。getElementById：返回的是原始的DOM元素，不具有Vue的響應式特性。如果你直接操作這個DOM元素，Vue不會自動檢測到變化，因此不會自動更新視圖。
-
使用場景：
ref：主要用於Vue組件內部，與Vue的數據綁定和生命週期緊密相關，適用於需要在組件內對特定DOM元素進行操作的情況。getElementById：是原生JavaScript方法，可以在任何地方使用，不侷限於Vue環境，用於在JavaScript中獲取DOM元素，通常用於一些簡單的DOM操作或者庫和框架不支持的地方。
-
類型安全：
ref：在TypeScript中，Vue3的ref可以進行類型定義，使得代碼具有更好的類型檢查和提示。getElementById：返回的是Element類型，對於具體是什麼類型的元素，需要開發者自己判斷。
-
批量操作：
ref：Vue3還引入了ref的數組形式，reactive和toRefArray等，可以方便地對多個元素進行批量操作和響應式管理。getElementById：沒有類似的功能，需要手動處理每個元素。
總結來說，ref是Vue3響應式系統的一部分，提供了更高級的特性和便利性，而getElementById是原生JavaScript操作DOM的方式，適用於不涉及Vue響應式系統的簡單場景。在Vue3開發中，通常優先推薦使用ref。
uniapp下 他封裝了html5的canvas 所以不能用html5下的canvas方法去操作
this.context = uni.createCanvasContext("myCanvas", this)
