Use Quadraticcurveto () to depict a 2-D Bezier Curve, where the previous coordinate point is connected to a 2-dimensional Bezier curve from the current coordinate point. The parameter CPX and cpy represent the control point coordinates of the Bezier curve, the parameter x, Y is the newly appended coordinate point, and the specified coordinate point is the datum point for the upper left of the canvas element .
what is a Bezier curveThe so-called Bezier is the curve calculated from the control point, which is generally used when a curve is required.
The Quadraticcurveto (CPX, cpy, x, Y) method draws a 2-dimensional Bezier curve from 1 control points and 1 additional coordinate points. Context. The Beziercurveto (cp1x, cp1y, CP2X, cp2y, x, y) method draws a 3-dimensional Bezier curve from 2 control points and an additional coordinate point.
the steps for drawing a 2-D Bezier curve are as follows:| value | Description | Example |
|---|---|---|
| CPx | The x-coordinate value of the control point. | |
| Ap | The y-coordinate value of the control point | |
| X | extends the x-coordinate of the 2-D Bezier curve from the current coordinates. | |
| H | Extends the y-coordinate of the 2-D Bezier curve from the current coordinates. |
var c=document.getelementbyid ("MyCanvas");
var ctx=c.getcontext ("2d");
Ctx.beginpath ();
Context.moveto (100,20);
Context.quadraticcurveto (150,100);
Context.stroke ();
| value | Description | Example |
|---|---|---|
| X | Draws the x-coordinate value of the start point of the current path. | |
| Y | Draws the y-coordinate value of the current path start point |
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> drawing images using canvas </title>
<script type= "text/javascript" >
<!--
function Test () {
Create a painting environment
var canvas = document.getElementById (' Sample1 ');
if (Canvas.getcontext) {
var context = Canvas.getcontext (' 2d ');
The following specifies the specific painting content
Context.beginpath (); Start a new path
Context.moveto (60,120);//coordinates of the start position of the path
Context.quadraticcurveto (150,20,250,100); Outline of the path
Context.stroke (); Displays the outline of the current path
}
}
-
</script>
<body onload= "Test ()" >
<canvas width= "height=" " id="sample1 "style=" ">
Only browsers that support canvas elements can display images properly.
</canvas>
</body>
Context.quadraticcurveto () Context.beziercurveto () detailed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
