canvas学习笔记【2021.10.27】

今天是看视频学习的canvas的第四天，我发现canvas太强大了，上可做游戏，下可做可视化数据。下面简单记录一下基础知识。

一、strokeText()和fillText()

第一个是绘制描边文本，第二个是绘制填充文本

一共四个参数：fillText('text',x,y,maxWidth)

text:想要输出的文本

x，y：文本相对于画布的xy坐标

maxWidth：可选参数，允许的最大的文本宽度，用像素计的。

二、createLinearGradient（）

var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
    gradient.addColorStop("0",'yellow');
    gradient.addColorStop('0.5',"blue");
    gradient.addColorStop('1','gold');
    ctx.fillStyle = gradient;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("线性渐变填充文字",600,400);

createLinearGradient（）创建一个线性渐变对象，可用于填充矩形、文本、线条、弧形、圆形等等。

addColorStop（）规定不同的颜色。

三、文本的水平位置和垂直位置的设置

文本水平位置是默认在规定坐标的右上角的，用textAlign = “style“改变

right和end都是在规定坐标的左上角

left和start是在规定坐标的右上角

center在规定坐标的上面的居中位置

文字垂直位置或者说基线的位置用textBaseline = “style”改变

top基线在文本上方

bottom基线在文本下方

middle基线在文本中间