- HTML5 Canvas Cookbook
- Eric Rowell
- 317字
- 2021-08-27 12:08:04
Drawing a Bezier curve
If Quadratic curves don't meet your needs, the Bezier curve might do the trick. Also known as cubic curves, the Bezier curve is the most advanced curvature available with the HTML5 canvas API.
How to do it...
Follow these steps to draw an arbitrary Bezier curve:
- Define a 2D canvas context and set the curve style:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.lineWidth = 10; context.strokeStyle = "black"; // line color context.moveTo(180, 130); - Position the canvas context and draw the Bezier curve:
context.bezierCurveTo(150, 10, 420, 10, 420, 180); context.stroke(); }; - Embed the canvas tag inside the body of the HTML document:
How it works...
HTML5 canvas Bezier curves are defined by the context point, two control points, and an ending point. The additional control point gives us much more control over its curvature compared to Quadratic curves:
context.bezierCurveTo(controlPointX1, controlPointY1,
controlPointX2, controlPointY2,
endingPointX, endingPointY);
Take a look at the following diagram:
Unlike Quadratic curves, which are defined by three characteristic tangents, the Bezier curve is defined by five characteristic tangents. The first part of the curve is tangential to an imaginary line that starts with the context point and ends with the first control point. The next part of the curve is tangential to the imaginary line that starts with midpoint 1 and ends with midpoint 3. The peak of the curve is tangential to the imaginary line that starts with midpoint 2 and ends with midpoint 4. The fourth part of the curve is tangential to the imaginary line that starts with midpoint 3 and ends with midpoint 5. Finally, the last part of the curve is tangential to the imaginary line that starts with the second control point and ends with the ending point.
- 機(jī)器學(xué)習(xí)實(shí)戰(zhàn)：基于Sophon平臺(tái)的機(jī)器學(xué)習(xí)理論與實(shí)踐
- Div+CSS 3.0網(wǎng)頁布局案例精粹
- 傳感器技術(shù)實(shí)驗(yàn)教程
- Dreamweaver 8中文版商業(yè)案例精粹
- Hands-On Neural Networks with Keras
- STM32G4入門與電機(jī)控制實(shí)戰(zhàn)：基于X-CUBE-MCSDK的無刷直流電機(jī)與永磁同步電機(jī)控制實(shí)現(xiàn)
- 智能生產(chǎn)線的重構(gòu)方法
- INSTANT Munin Plugin Starter
- INSTANT VMware vCloud Starter
- 嵌入式Linux系統(tǒng)實(shí)用開發(fā)
- Learn QGIS
- 案例解說Delphi典型控制應(yīng)用
- 工業(yè)機(jī)器人操作
- Instant Slic3r
- 渲染王3ds Max三維特效動(dòng)畫技術(shù)