如何使用canvas进行图形的绘制,比如:圆弧,曲线

2021-02-23 09:40发布

1条回答
哼哼哼哼哼
2楼-- · 2021-02-25 10:06

canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

绘图步骤
1. 获得 canvas 对象.
2. 调用 getContext 方法, 提供字符串参数 ‘2d’.
3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
5. 基本绘图命令
- 设置开始绘图的位置: context.moveTo( x, y ).
- 设置直线到的位置: context.lineTo( x, y ).
- 描边绘制: context.stroke().
- 填充绘制: context.fill().
- 闭合路径: context.closePath().

绘制圆弧的方法:

arc(x,y,r,sAngle,eAngle,counterclockwise);

画一个以(x,y)为圆心的以r为半径的圆弧(圆),从sAngle开始到eAngle结束,按照counterclockwise给定的方向(默认为顺时针)生成,true代表逆时针,false代表顺时针。