canvas day2

canvas是基于状态的

• 状态就是变量不同时期的值

画弧(画的是路径)

• ctx.arc(圆心x轴坐标, 圆心y轴坐标,半径,起点弧度,结束点弧度,是否逆时针画(可选) );
• arc方法内部会从路径结束点到弧的起点画一条路径线
• 起点弧度、 结束点弧度 以及弧度方向共同决定了弧的大小

画扇形 (画的是路径)

1. 先设置路径起点为圆心
2. 画弧
3. 闭合路径

绘制文字 (不会产生路径)

• 1.描边文字

ctx.strokeText(文字,参考x轴坐标, 参考Y轴坐标,限制文字的最大长度(可选) );

设置文字的属性

ctx.font = 和css语法一样;

注意: １.字体大小必须带单位，支持ＣＳＳ的所有表示方式． ２.必须加一个额外样式才会生效

• 2.填充文字

ctx.fillText(文字,参考x轴坐标, 参考Y轴坐标,限制文字的最大长度(可选) );

文字的水平对齐方式

• ctx.textAlign = "left || start" \/ "right || end"\/ "center"; 默认start

文字的垂直对齐方式

• ctx.textBaseline = "top" \/ "bottom" \/ "middle" \/

"alphabetic"(默认基线) \/ "hanging" \/" ideographic"