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)