如何从 Blazor 访问 HTML 画布？答案

【问题标题】：How do I access the HTML Canvas from Blazor?如何从 Blazor 访问 HTML 画布？
【发布时间】：2019-07-23 17:33:52
【问题描述】：

我正在尝试从 Blazor 对 HTML Canvas 进行 2D 绘图。我尝试使用 Blazor.Extensions.Canvas，但它似乎已经过时并且针对之前的 Blazor 服务器端实现。

我尝试实现一个简单的例子并得到一个异常

与...

{
protected Blazor.Extensions.BECanvasComponent _canvasRef;
private Blazor.Extensions.Canvas.Canvas2D.Canvas2DContext _context;

// Note I had to provide the full path since it seemed to ignore
//  my @using statement in most cases

    protected override async Task OnAfterRenderAsync()
    {
      this._context = await this._canvasRef.CreateCanvas2DAsync();
      await this._context.SetFillStyleAsync("green");

      await this._context.FillRectAsync(10, 100, 100, 100);

      await this._context.SetFontAsync("48px serif");
      await this._context.StrokeTextAsync("Hello Blazor!!!", 10, 100);
    }
}

我什至不得不在生成的文件中添加画布类的完整路径。但是，我终于在没有警告的情况下构建了它。我希望它会绘制绿色填充的矩形，但是......

这在浏览器中创建了一个“未处理的异常渲染组件”： 'Microsoft.JSInterop.JSException: t.getContext 不是函数'

引用该行： ' this._context = await this._canvasRef.CreateCanvas2DAsync();'

【问题讨论】：

标签： blazor

【解决方案1】：

我认为是.net core 版本和canvas 版本的兼容性问题。（我对 .net core preview 6 和 canvas 0.1.9 有同样的问题）。目前他们发布了 Canvas 0.2.0，因此它应该与 .core preview 7 一起使用。

【讨论】：