Blazor.Extensions.Canvas 绘图入门Canvas 2D 图形绘制的 10 个实用技巧【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/CanvasBlazor.Extensions.Canvas 是专为 Microsoft Blazor 打造的 HTML5 Canvas API 实现让你无需编写一行 JavaScript就能在 Blazor Server 和 WebAssembly 应用中轻松完成 Canvas 2D 图形绘制。本文面向零基础新手用 10 个实用技巧带你快速上手 Blazor 绘图从画矩形、线条到文字与阴影一步步掌握在 .NET 中驱动画布的完整姿势。 想自己动手跑一遍示例可直接 clone 仓库https://link.gitcode.com/i/677830e30f40b1bc70aa4850c203a8c1内置的 ClientSide / ServerSide 测试项目就是现成的 Demo。一、快速开始搭建你的第一个 Blazor Canvas 画布在写绘图代码之前先完成三步准备工作安装 NuGet 包Install-Package Blazor.Extensions.Canvas引入 JS 脚本在index.htmlWebAssembly或_Host.cshtmlServer中加入script src_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js/script该脚本位于项目的 wwwroot/blazor.extensions.canvas.js是 C# 与浏览器画布通信的桥梁。添加 BECanvas 组件在.razor页面里放一个画布并绑定引用BECanvas Width300 Height400 ref_canvasReference/BECanvasBECanvas组件源码很简单本质就是一个带 Id 的canvas元素宽高参数定义在 BECanvasComponent.cs 中。二、技巧 1在正确的生命周期里初始化 2D 上下文Blazor 绘图最常踩的坑在OnInitializedAsync里调用CreateCanvas2DAsync会报错——因为此时canvas元素还没渲染到 DOM。正确做法是在OnAfterRenderAsync中初始化protected override async Task OnAfterRenderAsync(bool firstRender) { this._context await this._canvasReference.CreateCanvas2DAsync(); await this._context.SetFillStyleAsync(green); await this._context.FillRectAsync(10, 100, 100, 100); }示例代码见 IndexComponent.cs而CreateCanvas2DAsync扩展方法定义在 CanvasContextExtensions.cs。三、技巧 2绘制矩形——画布绘图的第一课矩形是 Canvas 2D 图形绘制的基础库里提供了三个方法定义见 Canvas2DContext.csFillRectAsync(x, y, w, h)填充实心矩形StrokeRectAsync(x, y, w, h)只画边框ClearRectAsync(x, y, w, h)擦除区域做动画清屏利器await _context.FillRectAsync(10, 10, 100, 100); // 实心方块 await _context.StrokeRectAsync(130, 10, 100, 100); // 空心方块四、技巧 3用路径绘制任意线条图形想要画三角形、多边形或不规则图形使用路径三件套BeginPathAsync→MoveToAsync/LineToAsync→FillAsync/StrokeAsync。await _context.BeginPathAsync(); await _context.MoveToAsync(50, 50); await _context.LineToAsync(150, 50); await _context.LineToAsync(100, 130); await _context.ClosePathAsync(); await _context.FillAsync(); // 填充三角形所有路径方法定义在 Canvas2DContext.cs。五、技巧 4绘制圆形与弧线ArcAsync(x, y, radius, startAngle, endAngle, anticlockwise)能画圆、半圆和扇形注意角度单位是弧度而不是角度await _context.ArcAsync(100, 100, 50, 0, Math.PI * 2); // 完整圆形 await _context.StrokeAsync();方法签名见 Canvas2DContext.cs。六、技巧 5绘制与测量文字在画布上写字很简单SetFontAsync设置字体FillTextAsync填充文字StrokeTextAsync描边文字await _context.SetFontAsync(48px serif); await _context.FillTextAsync(Hello Blazor!, 10, 100); var metrics await _context.MeasureTextAsync(Hello Blazor!);MeasureTextAsync返回 TextMetrics可获取文字宽度用于居中排版。对齐方式可通过SetTextAlignAsync、SetTextBaselineAsync调整相关枚举在 Canvas2DEnums.cs。七、技巧 6颜色、透明度与绘制风格SetFillStyleAsync(green)/SetStrokeStyleAsync(#ff6600)填充色与描边色支持颜色名、十六进制等SetGlobalAlphaAsync(0.5f)全局透明度做出半透明叠加效果SetGlobalCompositeOperationAsync(source-over)控制合成模式await _context.SetGlobalAlphaAsync(0.5f); await _context.SetFillStyleAsync(rgba(255,0,0,1)); await _context.FillRectAsync(20, 20, 80, 80);八、技巧 7线条样式——宽度、端点与虚线画图表、坐标轴时线条样式是刚需await _context.SetLineWidthAsync(5); await _context.SetLineCapAsync(LineCap.Round); // 圆头端点 await _context.SetLineJoinAsync(LineJoin.Round); // 圆角拐点 await _context.SetLineDashAsync(new float[] { 10, 5 }); // 虚线对应实现见 Canvas2DContext.cs 与 SetLineDashAsync。九、技巧 8用阴影让图形立体起来四个属性即可给任意图形加阴影SetShadowColorAsync、SetShadowBlurAsync、SetShadowOffsetXAsync、SetShadowOffsetYAsync。await _context.SetShadowColorAsync(rgba(0,0,0,0.5)); await _context.SetShadowBlurAsync(10); await _context.SetShadowOffsetXAsync(5); await _context.SetShadowOffsetYAsync(5); await _context.FillRectAsync(50, 50, 100, 100); // 带投影的方块十、技巧 9平移、旋转与缩放变换组合TranslateAsync、RotateAsync、ScaleAsync能做出旋转风车、缩放动画等效果。强烈建议配合SaveAsync/RestoreAsync使用变换前Save操作完Restore避免影响后续绘制。await _context.SaveAsync(); await _context.TranslateAsync(150, 150); await _context.RotateAsync((float)(Math.PI / 4)); await _context.FillRectAsync(-50, -50, 100, 100); await _context.RestoreAsync();相关方法见 Canvas2DContext.cs。十一、技巧 10性能优化——善用调用批处理所有 JS 互操作默认会自动批量排队callBatch机制在 RenderingContext.cs 中实现。但在Blazor Server模式下由于服务端渲染特性连续多次绘制可能只显示最后一次结果因此绘制类操作建议显式包裹批处理await _context.BeginBatchAsync(); await _context.ClearAsync(BufferBits.COLOR_BUFFER_BIT); await _context.DrawArraysAsync(Primitive.TRIANGLES, 0, 3); await _context.EndBatchAsync();BeginBatchAsync/EndBatchAsync定义见 RenderingContext.cs。记住一个原则包围尽可能少的调用让自动批处理发挥最大效率。十二、进阶方向从 2D 走向 WebGL如果追求高性能 3D 或大规模粒子效果项目同样提供了完整的WebGLContext支持着色器、缓冲区等完整管线示例见 WebGLComponent.csvar gl await _canvasReference.CreateWebGLAsync(new WebGLContextAttributes { PowerPreference WebGLContextAttributes.POWER_PREFERENCE_HIGH_PERFORMANCE }); await gl.ClearColorAsync(0, 0, 0, 1); await gl.ClearAsync(BufferBits.COLOR_BUFFER_BIT);十三、常见问题速查FAQ问题解决方案初始化报错 canvas not found确认在OnAfterRenderAsync中调用而非OnInitializedAsyncServer 端画面被覆盖绘制操作显式使用BeginBatchAsync/EndBatchAsync包裹画面空白检查blazor.extensions.canvas.js脚本是否正确引入想画动画结合ClearRectAsyncSetIntervalAsync每帧重绘总结到这里你已经掌握了 Blazor.Extensions.Canvas 进行 Canvas 2D 图形绘制的核心技巧初始化时机、矩形与路径、文字与颜色、线条与阴影、变换与批处理。从最简单的矩形到复杂的 WebGL 场景这个库都能让你用纯 C# 完成。快打开 README.md 和测试项目动手试试吧下一张炫酷的数据大屏就出自你手【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/Canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Blazor.Extensions.Canvas 绘图入门：Canvas 2D 图形绘制的 10 个实用技巧
Blazor.Extensions.Canvas 绘图入门Canvas 2D 图形绘制的 10 个实用技巧【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/CanvasBlazor.Extensions.Canvas 是专为 Microsoft Blazor 打造的 HTML5 Canvas API 实现让你无需编写一行 JavaScript就能在 Blazor Server 和 WebAssembly 应用中轻松完成 Canvas 2D 图形绘制。本文面向零基础新手用 10 个实用技巧带你快速上手 Blazor 绘图从画矩形、线条到文字与阴影一步步掌握在 .NET 中驱动画布的完整姿势。 想自己动手跑一遍示例可直接 clone 仓库https://link.gitcode.com/i/677830e30f40b1bc70aa4850c203a8c1内置的 ClientSide / ServerSide 测试项目就是现成的 Demo。一、快速开始搭建你的第一个 Blazor Canvas 画布在写绘图代码之前先完成三步准备工作安装 NuGet 包Install-Package Blazor.Extensions.Canvas引入 JS 脚本在index.htmlWebAssembly或_Host.cshtmlServer中加入script src_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js/script该脚本位于项目的 wwwroot/blazor.extensions.canvas.js是 C# 与浏览器画布通信的桥梁。添加 BECanvas 组件在.razor页面里放一个画布并绑定引用BECanvas Width300 Height400 ref_canvasReference/BECanvasBECanvas组件源码很简单本质就是一个带 Id 的canvas元素宽高参数定义在 BECanvasComponent.cs 中。二、技巧 1在正确的生命周期里初始化 2D 上下文Blazor 绘图最常踩的坑在OnInitializedAsync里调用CreateCanvas2DAsync会报错——因为此时canvas元素还没渲染到 DOM。正确做法是在OnAfterRenderAsync中初始化protected override async Task OnAfterRenderAsync(bool firstRender) { this._context await this._canvasReference.CreateCanvas2DAsync(); await this._context.SetFillStyleAsync(green); await this._context.FillRectAsync(10, 100, 100, 100); }示例代码见 IndexComponent.cs而CreateCanvas2DAsync扩展方法定义在 CanvasContextExtensions.cs。三、技巧 2绘制矩形——画布绘图的第一课矩形是 Canvas 2D 图形绘制的基础库里提供了三个方法定义见 Canvas2DContext.csFillRectAsync(x, y, w, h)填充实心矩形StrokeRectAsync(x, y, w, h)只画边框ClearRectAsync(x, y, w, h)擦除区域做动画清屏利器await _context.FillRectAsync(10, 10, 100, 100); // 实心方块 await _context.StrokeRectAsync(130, 10, 100, 100); // 空心方块四、技巧 3用路径绘制任意线条图形想要画三角形、多边形或不规则图形使用路径三件套BeginPathAsync→MoveToAsync/LineToAsync→FillAsync/StrokeAsync。await _context.BeginPathAsync(); await _context.MoveToAsync(50, 50); await _context.LineToAsync(150, 50); await _context.LineToAsync(100, 130); await _context.ClosePathAsync(); await _context.FillAsync(); // 填充三角形所有路径方法定义在 Canvas2DContext.cs。五、技巧 4绘制圆形与弧线ArcAsync(x, y, radius, startAngle, endAngle, anticlockwise)能画圆、半圆和扇形注意角度单位是弧度而不是角度await _context.ArcAsync(100, 100, 50, 0, Math.PI * 2); // 完整圆形 await _context.StrokeAsync();方法签名见 Canvas2DContext.cs。六、技巧 5绘制与测量文字在画布上写字很简单SetFontAsync设置字体FillTextAsync填充文字StrokeTextAsync描边文字await _context.SetFontAsync(48px serif); await _context.FillTextAsync(Hello Blazor!, 10, 100); var metrics await _context.MeasureTextAsync(Hello Blazor!);MeasureTextAsync返回 TextMetrics可获取文字宽度用于居中排版。对齐方式可通过SetTextAlignAsync、SetTextBaselineAsync调整相关枚举在 Canvas2DEnums.cs。七、技巧 6颜色、透明度与绘制风格SetFillStyleAsync(green)/SetStrokeStyleAsync(#ff6600)填充色与描边色支持颜色名、十六进制等SetGlobalAlphaAsync(0.5f)全局透明度做出半透明叠加效果SetGlobalCompositeOperationAsync(source-over)控制合成模式await _context.SetGlobalAlphaAsync(0.5f); await _context.SetFillStyleAsync(rgba(255,0,0,1)); await _context.FillRectAsync(20, 20, 80, 80);八、技巧 7线条样式——宽度、端点与虚线画图表、坐标轴时线条样式是刚需await _context.SetLineWidthAsync(5); await _context.SetLineCapAsync(LineCap.Round); // 圆头端点 await _context.SetLineJoinAsync(LineJoin.Round); // 圆角拐点 await _context.SetLineDashAsync(new float[] { 10, 5 }); // 虚线对应实现见 Canvas2DContext.cs 与 SetLineDashAsync。九、技巧 8用阴影让图形立体起来四个属性即可给任意图形加阴影SetShadowColorAsync、SetShadowBlurAsync、SetShadowOffsetXAsync、SetShadowOffsetYAsync。await _context.SetShadowColorAsync(rgba(0,0,0,0.5)); await _context.SetShadowBlurAsync(10); await _context.SetShadowOffsetXAsync(5); await _context.SetShadowOffsetYAsync(5); await _context.FillRectAsync(50, 50, 100, 100); // 带投影的方块十、技巧 9平移、旋转与缩放变换组合TranslateAsync、RotateAsync、ScaleAsync能做出旋转风车、缩放动画等效果。强烈建议配合SaveAsync/RestoreAsync使用变换前Save操作完Restore避免影响后续绘制。await _context.SaveAsync(); await _context.TranslateAsync(150, 150); await _context.RotateAsync((float)(Math.PI / 4)); await _context.FillRectAsync(-50, -50, 100, 100); await _context.RestoreAsync();相关方法见 Canvas2DContext.cs。十一、技巧 10性能优化——善用调用批处理所有 JS 互操作默认会自动批量排队callBatch机制在 RenderingContext.cs 中实现。但在Blazor Server模式下由于服务端渲染特性连续多次绘制可能只显示最后一次结果因此绘制类操作建议显式包裹批处理await _context.BeginBatchAsync(); await _context.ClearAsync(BufferBits.COLOR_BUFFER_BIT); await _context.DrawArraysAsync(Primitive.TRIANGLES, 0, 3); await _context.EndBatchAsync();BeginBatchAsync/EndBatchAsync定义见 RenderingContext.cs。记住一个原则包围尽可能少的调用让自动批处理发挥最大效率。十二、进阶方向从 2D 走向 WebGL如果追求高性能 3D 或大规模粒子效果项目同样提供了完整的WebGLContext支持着色器、缓冲区等完整管线示例见 WebGLComponent.csvar gl await _canvasReference.CreateWebGLAsync(new WebGLContextAttributes { PowerPreference WebGLContextAttributes.POWER_PREFERENCE_HIGH_PERFORMANCE }); await gl.ClearColorAsync(0, 0, 0, 1); await gl.ClearAsync(BufferBits.COLOR_BUFFER_BIT);十三、常见问题速查FAQ问题解决方案初始化报错 canvas not found确认在OnAfterRenderAsync中调用而非OnInitializedAsyncServer 端画面被覆盖绘制操作显式使用BeginBatchAsync/EndBatchAsync包裹画面空白检查blazor.extensions.canvas.js脚本是否正确引入想画动画结合ClearRectAsyncSetIntervalAsync每帧重绘总结到这里你已经掌握了 Blazor.Extensions.Canvas 进行 Canvas 2D 图形绘制的核心技巧初始化时机、矩形与路径、文字与颜色、线条与阴影、变换与批处理。从最简单的矩形到复杂的 WebGL 场景这个库都能让你用纯 C# 完成。快打开 README.md 和测试项目动手试试吧下一张炫酷的数据大屏就出自你手【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/Canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考