- 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.
- Visualforce Development Cookbook（Second Edition）
- 腦動力：C語言函數(shù)速查效率手冊
- 大數(shù)據(jù)專業(yè)英語
- IoT Penetration Testing Cookbook
- Docker Quick Start Guide
- Ceph：Designing and Implementing Scalable Storage Systems
- Apache Superset Quick Start Guide
- 水下無線傳感器網(wǎng)絡(luò)的通信與決策技術(shù)
- 在實戰(zhàn)中成長：Windows Forms開發(fā)之路
- 嵌入式Linux系統(tǒng)實用開發(fā)
- HBase Essentials
- 運動控制系統(tǒng)（第2版）
- 機器學習案例分析（基于Python語言）
- Effective Business Intelligence with QuickSight
- R Statistics Cookbook