繪制貝塞爾曲線 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 貝塞爾曲線 1. 一次貝塞爾曲線其實是一條直線 ![](https://www.runoob.com/wp-content/uploads/2018/12/240px-b_1_big.gif) 2. 二次貝塞爾曲線 ![](https://www.runoob.com/wp-content/uploads/2018/12/b_2_big.gif) 3. 三次貝塞爾曲線 ![](https://www.runoob.com/wp-content/uploads/2018/12/b_3_big.gif) ## 繪制二次貝塞爾曲線 ``` quadraticCurveTo(cp1x, cp1y, x, y) ``` * ? 參數 1 和 2：控制點坐標 * ? 參數 3 和 4：結束點坐標實例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(10,200) ctx.quadraticCurveTo(40,100,200,200) ctx.stroke() } ``` ![](https://img.kancloud.cn/a8/77/a87715dfc24d897081ffc377a53716dc_263x217.png) ## 繪制三次貝塞爾曲線 ``` bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ``` * ? 參數 1 和 2：控制點 1 的坐標 * ? 參數 3 和 4：控制點 2 的坐標 * ? 參數 5 和 6：結束點的坐標實例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(40,200) ctx.bezierCurveTo(20,100,100,120,200,200) ctx.stroke() } ```