CanvasContext.createCircularGradient(number x, number y, number r)

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

返回值

CanvasGradient

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,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

“>

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AKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPAIDDEOH8Dg8AgMAgMMc7fwCAwCAwCQ4zzNzAIDAKDwBDj/A0MAoPA

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAADwAAAA8AAQMAAACuBRCwAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAADwBJREFUeF7s3QmQJFd1J/z3MrOqu6p7RnJ3VXV3dVV1dVV1dVV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1d%0A%0A“>

CanvasContext.closePath()

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

CanvasContext.clip()

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

基础库 1.6.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。

示例代码

const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(50, 50, 25, 0, 2*Math.PI)
    ctx.clip()
    ctx.drawImage(res.tempFilePath, 25, 25)
    ctx.restore()
    ctx.draw()
  }
})

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,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%0A

CanvasContext.clearRect(number x, number y, number width, number height)

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

清除画布上在该矩形区域内的内容

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

clearRect 并不是在指定区域画一个白色的矩形,而是清空该区域。为了有直观感受,这里给 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,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%0A%0A“>

CanvasContext.bezierCurveTo 方法

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

参数

number cp1x

第一个贝塞尔控制点的 x 坐标

number cp1y

第一个贝塞尔控制点的 y 坐标

number cp2x

第二个贝塞尔控制点的 x 坐标

number cp2y

第二个贝塞尔控制点的 y 坐标

number x

结束点的 x 坐标

number y

结束点的 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.arc(200, 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(150, 75)

ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

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

ctx.draw()

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

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

CanvasContext.beginPath()

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • 在最开始的时候相当于调用了一次 beginPath。
  • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。

示例代码

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

基础库 1.9.90 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

根据控制点和半径绘制圆弧路径。

参数

number x1

第一个控制点的 x 轴坐标

number y1

第一个控制点的 y 轴坐标

number x2

第二个控制点的 x 轴坐标

number y2

第二个控制点的 y 轴坐标

number radius

圆弧的半径

CanvasContext.arc创建圆形路径

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0,终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

number sAngle

起始弧度,单位弧度(在3点钟方向)

number eAngle

终止弧度

boolean counterclockwise

弧度的方向是否是逆时针

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()

ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)

// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

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

ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()

ctx.draw()

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUIAAACrCAYAAAATkZViAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABKQSURBVHhe7Z3ti1TVH8D9KwTDF70SoQLfZK6BSNGabUu2ZdtGlKUvEkLJfIaEpQhCM1tr3dotjCXXSNLa+ikJWlYgrZXIPlQb7avYRcEetjTd3b4/vzdGp3F27jnnPp6Zz8DgMnMe7vl8z3w8595zz50hvCAAAQjUOIEZNd5+mg8BCEBAECGdAAIQqHkCiLDmuwAAIAABREgfgAAEap4AIqz5LgAACEAAEdIHIACBmieACGu+CwAAAhBAhPQBCECg5gkYiXDGjBnCGwb0AfqAT33Axu7GIrQplLQQgAAEsiSgwrZ5GaW2LdTmAEgLAQhAIG4Cts5ChHFHwKI802CVm45UqqY0fSGtbTkWTSEpBHJFwPS3dfW3YXL0toWalFnraQpSMuEQxr/c98WflX4fVp7JMZEGAnkmYNvHGRFmGE3TYE2XrvB56b/aJESYYWCpOnMCpr8tRoSZh+q/snKZ6haEV250WTwNLi3btpPkABWHAAErArZ9nBGhFd54E9sGq/hcX7nzfsVHV6ls13rjbT2lQSA5ArZ9HBEmF4vQkm2DVSpC06kxI8LQUJCgygjY/rYQYYYdwDRYYRc7wi6WIMIMg0zVmRAw/W1xjjCT8FyrdLpzeJUujJheaa5UdvF3tp0lY2RUDwFjArZ9mxGhMVoSQgACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4TghAIDECiDAxtBQMAQj4QgAR+hIpjhMCEEiMACJMDC0FQwACvhBAhL5EiuOEAAQSI4AIE0NLwRCAgC8EEKEvkeI4IQCBxAggwsTQUjAEIOALAUToS6Q4Tgh%0A

CanvasContext

相关文档: 旧版画布迁移指南、canvas 组件介绍

canvas 组件的绘图上下文。CanvasContext 是旧版的接口, 新版 Canvas 2D 接口与 Web 一致。

属性

string|CanvasGradient fillStyle

基础库 1.9.90 开始支持,低版本需做兼容处理。

填充颜色。用法同 CanvasContext.setFillStyle()。

string|CanvasGradient strokeStyle

基础库 1.9.90 开始支持,低版本需做兼容处理。

边框颜色。用法同 CanvasContext.setStrokeStyle()。

number shadowOffsetX

基础库 1.9.90 开始支持,低版本需做兼容处理。

阴影相对于形状在水平方向的偏移

number shadowOffsetY

基础库 1.9.90 开始支持,低版本需做兼容处理。

阴影相对于形状在竖直方向的偏移

number shadowColor

基础库 1.9.90 开始支持,低版本需做兼容处理。

阴影的颜色

number shadowBlur

基础库 1.9.90 开始支持,低版本需做兼容处理。

阴影的模糊级别

number lineWidth

基础库 1.9.90 开始支持,低版本需做兼容处理。

线条的宽度。用法同 CanvasContext.setLineWidth()。

string lineCap

基础库 1.9.90 开始支持,低版本需做兼容处理。

线条的端点样式。用法同 CanvasContext.setLineCap()。

string lineJoin

基础库 1.9.90 开始支持,低版本需做兼容处理。

线条的交点样式。用法同 CanvasContext.setLineJoin()。

lineJoin 的合法值

值 说明 最低版本
bevel 斜角
round 圆角
miter 尖角

number miterLimit

基础库 1.9.90 开始支持,低版本需做兼容处理。

最大斜接长度。用法同 CanvasContext.setMiterLimit()。

number lineDashOffset

基础库 1.9.90 开始支持,低版本需做兼容处理。

虚线偏移量,初始值为0

string font

基础库 1.9.90 开始支持,低版本需做兼容处理。

当前字体样式的属性。符合 CSS font 语法 的 DOMString 字符串,至少需要提供字体大小和字体族名。默认值为 10px sans-serif。

number globalAlpha

全局画笔透明度。范围 0-1,0 表示完全透明,1 表示完全不透明。

string globalCompositeOperation

基础库 1.9.90 开始支持,低版本需做兼容处理。

在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 fill 填充块的合成,用于 stroke 线段的合成效果都是 source-over。

目前支持的操作有

  • 安卓:xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
  • iOS:xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

方法

CanvasContext.draw(boolean reserve, function callback)

将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)

创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。

CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)

创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。

CanvasContext.createPattern(string image, string repetition)

对指定的图像创建模式的方法,可在指定的方向上重复元图像

Object CanvasContext.measureText(string text)

测量文本尺寸信息。目前仅返回文本宽度。同步接口。

CanvasContext.save()

保存绘图上下文。

CanvasContext.restore()

恢复之前保存的绘图上下文。

CanvasContext.beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • 在最开始的时候相当于调用了一次 beginPath。
  • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。

CanvasContext.moveTo(number x, number y)

把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条

CanvasContext.lineTo(number x, number y)

增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0,终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

CanvasContext.rect(number x, number y, number width, number height)

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

根据控制点和半径绘制圆弧路径。

CanvasContext.clip()

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。

CanvasContext.fillRect(number x, number y, number width, number height)

填充一个矩形。用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。

CanvasContext.strokeRect(number x, number y, number width, number height)

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色,如果没设置默认是黑色。

CanvasContext.clearRect(number x, number y, number width, number height)

清除画布上在该矩形区域内的内容

CanvasContext.fill()

对当前路径中的内容进行填充。默认的填充色为黑色。

CanvasContext.stroke()

画出当前路径的边框。默认颜色色为黑色。

CanvasContext.closePath()

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。

CanvasContext.scale(number scaleWidth, number scaleHeight)

在调用后,之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

CanvasContext.rotate(number rotate)

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。

CanvasContext.translate(number x, number y)

对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

绘制图像到画布

CanvasContext.strokeText(string text, number x, number y, number maxWidth)

给定的 (x, y) 位置绘制文本描边的方法

CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

使用矩阵多次叠加当前变换的方法

CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

使用矩阵重新设置(覆盖)当前变换的方法

CanvasContext.setFillStyle(string|CanvasGradient color)

设置填充色。

CanvasContext.setStrokeStyle(string|CanvasGradient color)

设置描边颜色。

CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)

设定阴影样式。

CanvasContext.setGlobalAlpha(number alpha)

设置全局画笔透明度。

CanvasContext.setLineWidth(number lineWidth)

设置线条的宽度

CanvasContext.setLineJoin(string lineJoin)

设置线条的交点样式

CanvasContext.setLineCap(string lineCap)

设置线条的端点样式

CanvasContext.setLineDash(Array. pattern, number offset)

设置虚线样式。

CanvasContext.setMiterLimit(number miterLimit)

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的,连接处将以 lineJoin 为 bevel 来显示。

CanvasContext.fillText(string text, number x, number y, number maxWidth)

在画布上绘制被填充的文本

CanvasContext.setFontSize(number fontSize)

设置字体的字号

CanvasContext.setTextAlign(string align)

设置文字的对齐

CanvasContext.setTextBaseline(string textBaseline)

设置文字的竖直对齐

Canvas.toDataURL

基础库 2.11.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 画布指南、canvas 组件介绍

功能描述

返回一个包含图片展示的 data URI 。可以使用 type 参数指定其类型,默认为 PNG 格式。

参数

string type

图片格式,默认为 image/png

number encoderOptions

在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

返回值

string