手册

微信小程序框架

MINA 文件目录结构小程序配置

逻辑层(App Service)

注册程序注册页面模块化 API

微信小程序 WXML

微信小程序数据绑定微信小程序条件渲染 wx:if 微信小程序列表渲染 wx:for 微信小程序模板微信小程序事件微信小程序引用微信小程序 WXSS 微信小程序基础组件微信小程序WeUI.js网页开发样式库

视图容器

微信小程序视图容器微信小程序可滚动视图区域微信小程序滑块视图容器

基础内容

微信小程序内容组件图标 icon 微信小程序内容组件 text（文本）微信小程序内容组件进度条：progress

表单组件

微信小程序按钮组件：button 微信小程序表单组件 checkbox 微信小程序表单组件 form 微信小程序表单组件输入框 input 微信小程序表单组件 label 微信小程序表单组件选择器 picker 微信小程序表单组件picker-view（嵌入页面的滚动选择器）微信小程序表单组件单选框 radio 微信小程序表单组件滑动选择器 slider 微信小程序表单组件开关 switch 微信小程序表单组件多行输入框 textarea

操作反馈

wxapp操作反馈上拉菜单 action-sheet wxapp操作反馈模式对话框 modal wxapp操作反馈消息提示框：toast wxapp操作反馈消息提示框：loading

微信小程序导航

微信小程序导航 navigator

媒体组件

媒体组件 audio 媒体组件 image 媒体组件 video（视频）

地图

微信小程序地图 map

画布

wxapp画布 canvas

客服会话

微信小程序组件 contact-button（客服会话按钮）

网络

微信小程序API 发起请求微信小程序API 上传、下载微信小程序API Websocket

媒体

微信小程序API 图片微信小程序API 录音微信小程序API 音频播放控制微信小程序API 音乐播放控制微信小程序API 视频微信小程序音频组件控制微信小程序视频组件控制微信小程序API 文件

数据

微信小程序API 数据缓存

位置

微信小程序API 位置微信小程序API 获取位置微信小程序API 查看位置微信小程序API 地图组件控制

设备

微信小程序API 系统信息微信小程序API 网络状态微信小程序API 重力感应微信小程序API 罗盘微信小程序API 拨打电话微信小程序API 扫码

界面交互

微信小程序API 交互反馈微信小程序API 设置导航条微信小程序API 导航微信小程序API 动画

绘图

开放接口

微信小程序API 登录微信小程序API 用户数据的签名验证和加解密微信小程序API 用户信息微信小程序API 微信支付微信小程序API 模板消息微信小程序API 接收消息和事件微信小程序API 发送客服消息微信小程序API 临时素材接口微信小程序API 接入指引微信小程序API 分享微信小程序API 获取小程序页面二维码

工具

微信小程序工具概览微信小程序工具程序调试的三大主要功能区微信小程序工具代码编辑微信小程序工具项目页卡三大主要功能微信小程序工具下载地址微信小程序工具细节点微信小程序开发者工具测试版本的下载微信小程序联系我们微信小程序 Q&A

微信小程序设计规范

微信小程序设计规范（1）友好礼貌微信小程序设计规范（2）清晰明确微信小程序设计规范（3）便捷优雅微信小程序设计规范（4）统一稳定微信小程序设计规范（5）视觉规范

首页移动端小程序微信小程序开发文档

微信小程序API 绘图介绍（如何在Canvas上画图）

阅读90433

更新时间2022-04-11

微信小程序API 绘图

微信小程序API coordinates（Canvas 坐标系）

在Canvas上画图

所有在中的画图必须用 JavaScript 完成：

WXML：（我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板，不再重复）

JS：（我们在接下来的例子中会将 JS 放在 onLoad 中）

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

第一步：创建一个 Canvas 绘图上下文

首先，我们需要创建一个 Canvas 绘图上下文 CanvasContext。

CanvasContext 是小程序内建的一个对象，有一些绘图的方法：

const ctx = wx.createCanvasContext('myCanvas')

第二步：使用 Canvas 绘图上下文进行绘图描述

接着，我们来描述要在 Canvas 中绘制什么内容。

设置绘图上下文的填充色为红色：

ctx.setFillStyle('red')

用 fillRect(x, y, width, height) 方法画一个矩形，填充为刚刚设置的红色：

ctx.fillRect(10, 10, 150, 75)

第三步：画图

告诉组件你要将刚刚的描述绘制上去：

ctx.draw()

结果：

微信小程序API 绘图

微信小程序API coordinates（Canvas 坐标系）