如何在Flutter中制作图中此类带图片的Canvas设计？

核心思路 #

参考图中的Canvas设计核心包含渐变背景、弧形分割层、居中文字三个关键元素，借助Canvas 2D绘图API可分步骤实现。

具体实现步骤 #

1. 初始化Canvas基础结构
   先在HTML中定义Canvas容器，再获取绘图上下文：

   <canvas id="targetCanvas" width="400" height="300"></canvas>
   

   const canvas = document.getElementById('targetCanvas');
   const ctx = canvas.getContext('2d');
   

2. 绘制渐变背景
   使用线性渐变创建背景色彩过渡效果：

   // 创建从左上到右下的渐变
   const bgGradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
   bgGradient.addColorStop(0, '#4a6cf7');
   bgGradient.addColorStop(1, '#2c48a0');
   // 填充整个画布
   ctx.fillStyle = bgGradient;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   

3. 绘制弧形分割层
   通过二次贝塞尔曲线绘制平滑弧形，实现图中的分层效果：

   ctx.fillStyle = 'rgba(255,255,255,0.15)';
   ctx.beginPath();
   // 从左上角出发，绘制顶部直线
   ctx.moveTo(0, 0);
   ctx.lineTo(canvas.width, 0);
   // 绘制右下侧弧形
   ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width/2, canvas.height - 30);
   // 绘制左下侧弧形并闭合路径
   ctx.quadraticCurveTo(0, canvas.height, 0, 0);
   ctx.closePath();
   ctx.fill();
   

   调整quadraticCurveTo的参数，可以修改弧形的弧度和位置，匹配参考图的视觉效果。

4. 添加居中文字
   设置文字样式后，通过对齐属性实现居中绘制：

   // 主标题
   ctx.fillStyle = '#ffffff';
   ctx.font = 'bold 24px Arial';
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   ctx.fillText('核心标题', canvas.width/2, canvas.height/2);
   // 副标题
   ctx.font = '16px Arial';
   ctx.fillText('辅助说明文字', canvas.width/2, canvas.height/2 + 30);
   

5. 细节优化（可选）

   • 给分割层添加阴影增强层次感：

     ctx.shadowColor = 'rgba(0,0,0,0.2)';
     ctx.shadowBlur = 10;
     ctx.shadowOffsetY = 5;
     

     注意：阴影建议仅作用于分割层，避免整体画布出现冗余阴影。
   • 微调渐变色值、弧形参数，精准匹配参考图风格。

关键API说明 #

• createLinearGradient(x0, y0, x1, y1)：创建线性渐变对象，实现背景色彩过渡。
• quadraticCurveTo(cpX, cpY, x, y)：绘制二次贝塞尔曲线，生成平滑弧形。
• textAlign/textBaseline：控制文字的水平、垂直居中对齐。

内容的提问来源于stack exchange，提问作者YAL Genisys