使用 TypeScript (Aurelia) 在 HTML5 canvas 上绘图

Question

我想使用 TypeScript (Aurelia) 在 HTML5 canvas 上绘图，但不知道该怎么做。

我在我的 html 文件中声明了一个 canvas：

<canvas id="clock" width="200" height="100"></canvas>

如何从我的 .ts 文件访问它并在其上绘制一些形状？请指教，任何帮助表示赞赏！

Answer 1

你需要给它加一个ref。这将告诉 Aurelia 在您的视图模型（.ts 文件）上将此元素设置为属性。

 <canvas id="clock" ref="clock" width="200" height="100"></canvas>

在您的视图模型中

 export class MyViewModel {
   public clock: HTMLCanvasElement;

   attached() {
     const context = this.clock.getContext('2d');

     // now you can do stuff with it
   }
 }

Answer 2

对于任何 aurelia 自定义元素，您可以在构造函数中注入元素并在视图中引用该元素..

您还可以使用 ref 绑定将您的 canvas 元素放入 vm http://aurelia.io/docs/binding/basics#referencing-elements

和 canvas 本身去 mdn: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

使用 TypeScript (Aurelia) 在 HTML5 canvas 上绘图

Draw on HTML5 canvas using TypeScript (Aurelia)

html5-canvas

typescript

aurelia