一、Canvas-绘制文字
1、属性
1)与css的font属性类似,接受值也完全相同
font
2)水平对齐方式,值可以是left、right和center
textAlign
//绘制文本的基准线
context.beginPath();
context.moveTo(200,0);
context.lineTo(200,400);
context.stroke();
3)文本基线,设置垂直方向对齐,值可以是top、middle和bottom,alphabetic(默认值,字母基线)hanging( 悬挂基线)
textBaseline
注意: 无论是水平方向对齐还是垂直方向对齐,都是基准线对齐,并不是文字对齐
2、方法
1)在指定位置绘制空心文字,后面的x,y指的是左下角的坐标
strokeText(text,x,y)
2)在指定位置绘制实心文字
fillText(text,x,y)
3)返回指定文字的大小信息
measureText("指定文本")
二、canvas-设置阴影
1、使用CSS语法声明阴影颜色
shadowColor
2、接受一个数字,确定对象阴影的水平投射距离
shadowOffsetX
3、接受一个数字,确定对象阴影的垂直投射距离
shadowOffsetY
4、为阴影生成模糊效果
shadowBlur
三、canvas-创建路径-绘制矩形和圆形
1、标识方法
开始创建路径,每次绘制新图形之前,都要先重新创建一个路径
beginPath()
结束创建路径,主要用于让线条闭合
closePath()
2、设置方法
设置矩形形状
rect(x,y,width,height)
x和y - 矩形的左上角
width/height - 矩形的宽和高
设置圆形形状
arc(x,y,radius,startAngle,endAngle,direction)
x/y - 设置圆心的坐标值
radius - 圆形的半径
startAngle - 开始位置
endAngle - 结束位置
direction - 方向:默认值为false,表示顺时针