[JavaScript知识库] Canvas---＜二次贝塞尔曲线＞

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Canvas---＜二次贝塞尔曲线＞ -> 正文阅读

[JavaScript知识库]Canvas---＜二次贝塞尔曲线＞

ctx.quadraticCurveTo(controlX, controlY, x, y)

以 (controlX, controlY) 坐标为控制点、(x,y)坐标为结束点，画曲线。

画一条曲线?

  const canvas = document.getElementById('canvas') as Element
  const ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.moveTo(75, 25) // (75, 25) 作为开始点
  ctx.quadraticCurveTo(25, 25, 25, 65) // 以(25, 25)做控制点、(25, 65)做结束点
  ctx.stroke() // 画线条

?画一个气泡

  const canvas = document.getElementById('canvas') as Element
  const ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.moveTo(75, 25) // (75, 25) 作为开始点
  ctx.quadraticCurveTo(25, 25, 25, 75) // 以(25, 25)做控制点、(25, 75)做结束点
  ctx.quadraticCurveTo(25, 125, 75, 125)
  ctx.quadraticCurveTo(125, 125, 125, 75)
  ctx.quadraticCurveTo(125, 25, 75, 25)
  ctx.stroke() // 画线条