在html創(chuàng)建一個canvas畫布
<canvas id="canvas" ref="Canvas" />

使用js語句繪制畫布

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

const draw = (value: string) => {
  // 創(chuàng)建 context 對象
  const ctx = canvas.value?.getContext('2d');

 // 設(shè)置畫布寬高
  canvas.value.width = 200;
  canvas.value.height = 100;
  // 創(chuàng)建一個線性漸變
  const gradient = ctx.createLinearGradient(0,0,200,0);

  // 設(shè)置漸變顏色
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  // 設(shè)置fillStyle為當(dāng)前的漸變對象，并填充
  ctx.fillStyle = gradient;
  ctx.fillRect(10,10,250,40);

  // 設(shè)置字體樣式和內(nèi)容
  ctx.font="16px Arial";
  ctx.fillStyle = 'black';
  ctx.fillText("Hello World",8,10)
};

展示效果

其他方法：

fillText(text,x,y):在畫布上繪制實(shí)心文本；

strokeText(text,x,y):在畫布上繪制空心文本；

fillStyle():設(shè)置或返回用于填充繪畫的顏色、漸變或模式

fillRect(x,y,width,height) :繪制“被填充”的矩形.如 fillRect 方法擁有參數(shù) (0,0,200,100)。即在畫布上繪制 200x100 的矩形，從左上角開始 (0,0)。