CanvasContext.quadraticCurveTo
Create a quadratic cubic Bezier curve path. The start point of the former point of the path.
Parameters
It is Object type.
| Property | Type | Description |
| cpx | Number | The x coordinate of Bezier control point. |
| cpy | Number | The y coordinate of Bezier control point. |
| x | Number | The x coordinate of end point. |
| y | Number | The y coordinate of end point. |
Sample Code
copy
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.beginPath()
ctx.arc(30, 30, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.beginPath()
ctx.arc(250, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.beginPath()
ctx.arc(30, 200, 2, 0, 2 * Math.PI)
ctx.setFillStyle('green')
ctx.fill()
ctx.setFillStyle('black')
ctx.setFontSize(12)
ctx.beginPath()
ctx.moveTo(30, 30)
ctx.lineTo(30, 150)
ctx.lineTo(250, 30)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(30, 30)
ctx.quadraticCurveTo(30, 150, 250, 25)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()