codecamp

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

微信小程序 canvas接口和方法绘图接口和方法


在Canvas上画图


所有在<canvas/>中的画图必须用 JavaScript 完成:

WXML:(我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板,不再重复)

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

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)

第三步:画图

告诉<canvas/>组件你要将刚刚的描述绘制上去:

ctx.draw()

结果:

微信小程序 绘图接口和方法绘图接口和方法

微信小程序API 位置
微信小程序API coordinates(Canvas 坐标系)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }