使用canvas绘制一个10弧度的圆角三角形

可以通过绘制一个带有圆角的矩形和三角形来实现圆角三角形。具体步骤如下：

1. 绘制带有圆角的矩形
2. 绘制三角形
3. 在圆角矩形和三角形的交界处裁剪出圆角三角形

代码如下：

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

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

// 绘制圆角矩形
function roundedRect(x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.arcTo(x + w, y, x + w, y + r, r);
  ctx.lineTo(x + w, y + h);
  ctx.lineTo(x, y + h);
  ctx.lineTo(x, y + r);
  ctx.arcTo(x, y, x + r, y, r);
  ctx.closePath();
}

// 绘制三角形
function triangle(x, y, size) {
  const halfSize = size / 2;
  ctx.beginPath();
  ctx.moveTo(x, y - halfSize);
  ctx.lineTo(x + halfSize, y + halfSize);
  ctx.lineTo(x - halfSize, y + halfSize);
  ctx.closePath();
}

const x = 100;
const y = 100;
const size = 100;
const radius = 10;

// 绘制圆角矩形
roundedRect(x - size / 2, y, size, size, radius);
ctx.fillStyle = '#f00';
ctx.fill();

// 绘制三角形
triangle(x, y, size);
ctx.fillStyle = '#f00';
ctx.fill();

// 裁剪出圆角三角形
ctx.globalCompositeOperation = 'destination-in';
roundedRect(x - size / 2, y, size, size, radius);
triangle(x, y, size);
ctx.fill();

运行代码后，会在 canvas 中绘制一个红色的圆角三角形。