canvas圆弧、椭圆、贝塞尔曲线、文本、对齐方式、绘制图片及切图案例

想了解更全面的canvas API可以点击右侧: canvas简介及常用API

canvas绘制圆弧

arc(x, y, r, startAngle, endAngle, anticlockwise)

1. x,y为圆心的坐标
2. radius 为圆形的半径
3. startAngle 为弧度的起始位置,0是正x轴的
4. endAngle 为弧度的终点位置,

arcTo(x1,y1,x2,y2,r)

1. x1,y1 坐标 1
2. x2,y2 坐标 2
3. radius 为圆形的半径

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点

canvas绘制椭圆（Google可以使用）

canvas 贝塞尔曲线

• 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
• 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
• 贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。

二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
1.绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
2.起始点为moveto时指定的点

三次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
1.绘制三次贝塞尔曲线，cp1x,cp1y为控制点1，cp2x,cp2y为控制点2，x,y为结束点。
2.起始点为moveto时指定的点

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！