在html创建一个canvas画布
<canvas id="canvas" ref="Canvas" />
使用js语句绘制画布
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(text,x,y):在画布上绘制实心文本；
strokeText(text,x,y):在画布上绘制空心文本；
fillStyle():设置或返回用于填充绘画的颜色、渐变或模式
fillRect(x,y,width,height) :绘制“被填充”的矩形.如 fillRect 方法拥有参数 (0,0,200,100)。即在画布上绘制 200x100 的矩形，从左上角开始 (0,0)。
