vscode自動提示失效 HTML5畫布

畫布

簡介

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

注意：
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成

VSCode中無法提示canvas內容

會發現canvas節點應該有個 getContext() 方法，但是編輯器不知道canvas是什麼類型的節點，無法進行自動提示。
解決辦法：

/** @type {HTMLCanvasElement} */
將上述代碼添加到獲取的canvas對象上方即可。
@type可以指定獲取對象的類型【此處指定HTMLCanvasElement類型】
此時編輯器就可以進行自動提示了

可以明顯看到編輯器那非常友好的提示信息，當你不記得時，這是最大的幫手。

實踐：繪製矩形

繪製矩形的步驟

1. 取得canvas對象
2. 取得2d上下文對象（context）
3. 設置繪圖樣式
   fillStyle 填充樣式
   strokeStyle 邊框樣式
4. 指定線寬（僅對邊框矩形有效）
5. 繪製矩形
   fillRect(x,y,width,height) 填充矩形
   strokeRect(x,y,width,height) 邊框矩形

<script>
    window.onload=function(){
        //獲取canvas對象
        /** @type {HTMLCanvasElement} */
        var canvas = document.getElementById('canvas');
        //獲取2d上下文對象
        var context = canvas.getContext('2d');
        //設置繪圖樣式
        context.fillStyle='red';
        context.strokeStyle='blue';
        //設置線寬
        context.lineWidth=0;
        //繪製矩形
        context.fillRect(100,100,150,150);
        context.strokeRect(300,300,50,50);
    }
</script>