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>