canvas绘制

canvas

 <canvas id="canvas" ref="Canvas" />

绘制画布

const canvas = ref<any | null>(null);

const draw = (value: string) => {
  // 创建 context 对象
  const ctx = canvas.value?.getContext('2d');

 // 设置画布宽高
  canvas.value.width = 200;
  canvas.value.height = 100;
  // 创建一个线性渐变
  const gradient = ctx.createLinearGradient(0,0,200,0);

  // 设置渐变颜色
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  // 设置fillStyle为当前的渐变对象，并填充
  ctx.fillStyle = gradient;
  ctx.fillRect(10,10,250,40);

  // 设置字体样式和内容
  ctx.font="16px Arial";
  ctx.fillStyle = 'black';
  ctx.fillText("Hello World",8,10)
};

展示效果

 其他方法：

fillText():在画布上绘制实心文本；

strokeText():在画布上绘制空心文本；

fillStyle():设置或返回用于填充绘画的颜色、渐变或模式

fillRect():绘制“被填充”的矩形.