Home > Article > Web Front-end > How to draw Bezier curve using HTML5 Canvas?
How to draw Bezier curve using HTML5 Canvas?
- WBOYforward
- 2023-09-02 20:21:051336browse
HTML5
To draw a Bezier curve using the HTML5 canvas, use the bezierCurveTo() method. This method adds the given point to the current path, connecting it to the previous path via a cubic Bezier curve with the given control points.
#You can try running the following code to learn how to draw Bezier curves on HTML5 Canvas. The x and y parameters in the bezierCurveTo() method are the coordinates of the endpoints. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.
Example
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id = "newCanvas" width = "500" height = "300" style = "border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); 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>
Output
The above is the detailed content of How to draw Bezier curve using HTML5 Canvas?. For more information, please follow other related articles on the PHP Chinese website!