微信小程序教程
7.9.31 quadraticCurveTo
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

概述

网络

媒体

操作文件

本地存储

位置

设备

界面

Canvas绘图

bezierCurveTo

arc

lineTo

moveTo

closePath

beginPath

stroke

fill

clearRect

strokeRect

fillRect

rect

setMiterLimit

setLineDash

setLineJoin

setLineCap

setLineWidth

addColorStop

createCircularGradient

createLinearGradient

setShadow

setStrokeStyle

setFillStyle

wx.canvasToTempFilePath

wx.createCanvasContext

Canvas API

渐变

颜色

Canvas坐标系

概述

quadraticCurveTo

canvasContext.quadraticCurveTo()方法创建二次贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。

参数

参数 类型 说明
cpx Number 贝塞尔控制点的x坐标
cpy Number 贝塞尔控制点的y坐标
x Number 结束点的x坐标
y Number 结束点的y坐标

例子

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

针对moveTo(20, 20)quadraticCurveTo(20, 100, 200, 20)的三个关键坐标如下:

  • 红色:起始点(20, 20)
  • 蓝色:控制点(20, 100)
  • 绿色:终止点(200, 20)

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验