HTML5Canvas Intellisense

Question

有一种方法可以为HTML5帆布元素获得Intellisense吗？在vs代码0.7.10中，当我在JS代码中编写此：

context = document.getElementById(canvasId).getContext('2d');

然后我写

context. 

我对我的上下文没有任何智力帮助。 thanks。

VS代码可以支持它！

Answer 1

just nell vs代码是哪种类型。在您的变量上添加以下代码，然后VS代码知道它是什么。抱歉，我没有足够的点来发布图像。只需单击

context

查看其工作原理即可。

solution

solution

我使用“类型铸造”：

/** @type {CanvasRenderingContext2D} */

然后享受基本的Intellisense：

Answer 2

目前不受VS代码的支持，很难修复。由于JavaScript缺乏类型注释，因此VS代码试图尽可能好。在您的示例中，var canvas = /** @type {HTMLCanvasElement} */ (document.querySelector('#canvas')) 破坏了此流程，因为从规格中可以返回任何HTML元素（而且我们对HTML结构或值的值不再了解document.getElementById

）。 像这样的东西，对vs代码更有利：

Answer 3

canvasId

端，您可以考虑使用Typescript，因为您使用类型的注释和类型铸造。
    

您必须重新解析@Type变量，并分配CTX以使Intellisense在另一个函数中作为参数将CTX作为参数再次工作。这对我有用：

var canvas = document.createElement('canvas');
canvas.|

问题是VS代码无法检测到您的元素是否实际上是

const drawGame=(ctx)=>{
     /** @type {CanvasRenderingContext2D} */
    var dgCtx = ctx
    dgCtx.fillStyle = "#79d70e"
    dgCtx.fillRect(0,0,gs.width, gs.height)
}

useEffect(()=>{
    const canvas = canvasRef.current
    /** @type {CanvasRenderingContext2D} */
    const ctx = canvas.getContext("2d")
    drawGame(ctx)
},[])

Answer 4

document.getElementById()

告诉VS代码）告诉代码，您的返回元素实际上是一个。

一个问题是，

<canvas>

函数只会返回第一个

Answer 5

元素，如果您尝试处理多个元素，它将更难做到，而且您不能选择像这样的特定ID，因为它无法介绍自动填充，因此

因此，我们必须使用

<canvas>

来获取页面中的所有元素，然后我们将根据

document.querySelector("canvas")

选择特定的

<canvas>

并在上面进行一些过滤。

这种方法可以有效地使用VS代码：

document.querySelector("canvas#id")

然后您可以编写任何HTML5画布，

在此效果