arcTo与贝塞尔 · 前端技术总结

## 一、arcTo(x1, y1, x2, y2, radius) 控制点1（x1, y1）控制点2（x2, y2）半径（radius） arcTo不能单独使用，必须要小媳妇moveTo()配合使用才行，还是比较绕人的，还好本人花了一个简洁明了的示意图 ![](https://box.kancloud.cn/538084e823d2ac82bad8ddaeb1cac6d0_136x144.jpg) 很直观，就是3连线，取两线相切的规定半径的圆。。 ![](https://box.kancloud.cn/94b54fe90f525c2bdabb0f0db3e26172_230x122.jpg) 代码如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); // 白线 ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#fff'; ctx.moveTo(50, 20); ctx.lineTo(150, 20); ctx.lineTo(150, 100); ctx.lineTo(50, 20); ctx.closePath(); ctx.stroke(); // arcTo ctx.lineWidth = 2; ctx.strokeStyle = '#A7F705'; ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150,100,50,20,30); ctx.stroke(); // 蓝点 ctx.fillStyle = 'blue'; ctx.fillRect(150, 20, 10, 10); ctx.fillStyle = '#fff'; ctx.fillText('150, 20', 170, 30); // 蓝点下红点 ctx.fillStyle = 'red'; ctx.fillRect(150, 100, 10, 10); ctx.fillStyle = '#fff'; ctx.fillText('150, 100', 170, 110); // 蓝点左红点 ctx.fillStyle = 'red'; ctx.fillRect(50, 20, 10, 10); ctx.fillStyle = '#fff'; ctx.fillText('50, 20', 10, 30); </script> </body> </html> ~~~ ## 二、二次贝塞尔曲线quadraticCurveTo(cpX1, cpY1, endX, endY) 控制点1（cpX1, cpY1）结束点（endX, endY）同上使用quadraticCurveTo()也需要moveTo()配合示意图 ![](https://box.kancloud.cn/68b8c2bacefab96f41c213cb7b57a5ed_152x73.jpg) 效果 ![](https://box.kancloud.cn/2e42a6d082d7e0370b839c567b6f3687_129x81.jpg) 代码 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); // 绿色线 ctx.setLineDash([4, 4]); ctx.strokeStyle = '#1AF531'; ctx.beginPath(); ctx.moveTo(75,25); ctx.lineTo(25,25); ctx.lineTo(25,62.5); ctx.lineTo(75,25); ctx.closePath(); ctx.stroke(); // quadraticCurveTo ctx.setLineDash([0, 0]); ctx.strokeStyle = '#f00'; ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.stroke(); // 白色点 ctx.fillStyle = '#fff'; ctx.fillText('75, 25', 85, 30); ctx.fillRect(75, 25, 4, 4); // 红色点 ctx.fillStyle = '#f00'; ctx.fillText('25, 25', 0, 20); ctx.fillRect(25, 25, 4, 4); // 黄色点 ctx.fillStyle = '#F7C124'; ctx.fillText('25, 62.5', 30, 68); ctx.fillRect(25, 62.5, 4, 4); </script> </body> </html> ~~~ ## 三、三次贝塞尔曲线bezierCurveTo(cpX1, cpY1, cpX2, cpY2, endX, endY) 与二次贝塞尔曲线比多了一个控制点 ![](https://box.kancloud.cn/cab8abe8ced503ca138aa60672d3e677_148x84.jpg) 有了上面的经验，这次可以尝试简单理解，主要就是在moveTo(x, y) 与 (endX, endY) 两点间，加两个控制点（cpX1, cpY1）（cpX2, cpY2）下面用bezierCurveTo()绘制青苹果 ![](https://box.kancloud.cn/8806d5493a14272d8479916e051d568d_131x122.jpg) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); //三次贝塞尔曲线 var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0, "green"); gradient.addColorStop(1, "white"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); </script> </body> </html> ~~~ 结束，，拖地喽~~~ ![](https://box.kancloud.cn/d05272986c9c16f1790f252905facb48_188x150.jpg)