此博文不研究其算法，只记录下其用法。
首先是二次贝塞尔曲线！
函数是这样的
quadraticCurveTo(cpx, cpy, x, y);
其中cpx为贝塞尔控制点x；
其中cpy为贝塞尔控制点y；
其中x为结束点x坐标；
其中y为结束点y坐标。
这里隐藏了一个开始点，一般用beginPath()和moveTo方法来定义开始点：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.beginPath();
- context.moveTo(100, 100);
- context.quadraticCurveTo(100, 300, 400, 400);
- context.stroke();
- }
-
-
- </script>
-
- </body>
- </html>
下面是三次贝塞尔曲线
函数为bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
其中cp1x为第一个贝塞尔控制点x轴坐标；
其中cp1y为第一个贝塞尔控制的y轴坐标；
其中cp2x为第二个贝塞尔控制的x轴坐标；
其中cp2y为第二个贝塞尔控制的y轴坐标；
其中x为结束点坐标；
其中y为结束点坐标；
同样这个函数也需要一个moveTo去增加一个开始点！
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.beginPath();
- context.moveTo(20, 20);
- context.bezierCurveTo(20, 700, 200, 100, 700, 500);
- context.stroke();
- }
-
-
- </script>
-
- </body>
- </html>
