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():绘制“被填充”的矩形.