开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
基础 api
基础
应用级事件
界面
导航栏
tabbar
路由
交互反馈
下拉刷新
联系人
选择城市
选择日期
动画
画布
canvas
canvasrenderingcontext2d
canvaspattern
offscreencanvas
旧版接口
canvascontext
canvasgradient
地图
计算路径
键盘
滚动
节点查询
选项选择器
级联选择
设置窗口背景
设置页面是否支持下拉
字体
跳转
多媒体
缓存
文件
位置
网络
设备
worker
数据安全
分享
收藏
自定义通用菜单
更新管理
web-view组件控制
升级支付宝最新版本
隐私信息授权
小程序广告
开放能力 api
开发 > api > 基础 api > 界面 > 画布 > 旧版接口 > canvascontext > canvascontext.arcto
收藏
我的文档
设置

canvascontext.arcto(number x1, number y1, number x2, number y2, number radius)

支付宝客户端 支持

支小宝客户端 支持

安诊儿客户端 支持

主体: 企业支付宝小程序个人支付宝小程序

相关文档: 旧版 canvas 迁移指南

根据基础点、控制点和半径,绘制圆弧路径。

number x1

第一个控制点的 x 轴坐标

number y1

第一个控制点的 y 轴坐标

number x2

第二个控制点的 x 轴坐标

number y2

第二个控制点的 y 轴坐标

number radius

圆弧的半径

.js
// 这是一段绘制圆弧的简单的代码片段。基础点是蓝色的,两个控制点是红色的。
const context = my.createcanvascontext('canvas');
// 基础点坐标
const basex = 200
const basey = 20
// 控制点 1 坐标
const controlx1 = 200
const controly1 = 130
// 控制点 2 坐标
const controlx2 = 50
const controly2 = 20
// 圆弧半径
const r = 40;
// 绘制弧线
context.strokestyle = 'black';
context.linewidth = 5;
context.beginpath();
context.moveto(basex, basey);
context.arcto(controlx1, controly1, controlx2, controly2, r);
context.stroke();
// 绘制切线
context.strokestyle = 'gray';
context.linewidth = 1;
context.beginpath();
context.moveto(basex, basey);
context.lineto(controlx1, controly1);
context.lineto(controlx2, controly2);
context.stroke();
// 绘制基础点
context.fillstyle = 'blue';
context.beginpath();
context.arc(basex, basey, 5, 0, 2 * math.pi);
context.fill();
// 绘制控制点
context.fillstyle = 'red';
context.beginpath();
context.arc(controlx1, controly1, 5, 0, 2 * math.pi);
context.arc(controlx2, controly2, 5, 0, 2 * math.pi);
context.fill();
context.draw()
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图