canvas1、canvas基本绘制 html部分 js部分(适用于vue、原生) var c = document.g

1、canvas基本绘制
html部分
<canvas id="canvas" width="200" height="100"></canvas>
js部分(适用于vue、原生)
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
//字体样式
ctx.font = "20px Georgia";
//文字居中(ctx.fillText里面的第二个值要为容器宽度的一半)
ctx.textAlign = "center";
// 创建渐变
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.fillStyle = gradient;
ctx.fillText("Hello World!", 100, 50);