本页目录

Canvas 贝塞尔曲线

绘制贝塞尔二次曲线

聊天框

js

context.moveTo(200, 300)
// quadraticCurveTo(控制点x,控制点y,终点x,终点y)
context.quadraticCurveTo(150, 300, 150, 200)
context.quadraticCurveTo(150, 100, 300, 100)
context.quadraticCurveTo(450, 100, 450, 200)
context.quadraticCurveTo(450, 300, 250, 300)
context.quadraticCurveTo(250, 350, 150, 350)
context.quadraticCurveTo(200, 350, 200, 300)

context.stroke()

绘制贝塞尔三次曲线

爱心

js

context.moveTo(300, 120)
// bezierCurveTo(控制点1 x,控制点1 y,控制点2 x,控制点2 y,终点x,终点y)
context.bezierCurveTo(450, 50, 500, 200, 300, 350)
context.bezierCurveTo(100, 200, 150, 50, 300, 120)

context.stroke()

Copyright © 2023-present lemon