使用 TypeScript (Aurelia) 在 HTML5 画布上绘图

【问题标题】：Draw on HTML5 canvas using TypeScript (Aurelia)使用 TypeScript (Aurelia) 在 HTML5 画布上绘图
【发布时间】：2018-02-07 04:27:15
【问题描述】：

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

我已经在我的 html 文件中声明了一个画布：

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

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

【问题讨论】：

标签： typescript html5-canvas aurelia

【解决方案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
   }
 }

【讨论】：

非常感谢，正是我需要的！

【解决方案2】：

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

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

对于画布本身，请转到 mdn：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

【讨论】：