微信小程序开发之——时钟-Canvas介绍(1)

onReady: function () {

//1- 使用 wx.createContext 获取绘图上下文 context

var context = wx.createCanvasContext(‘firstCanvas’)

//2-设置填充色

context.setFillStyle(‘red’)

//3-绘制图形形状

context.fillRect(0,0,150,150)

//4-开始绘制

context.draw()

},

3.1.3 效果图

[外链图片转存中…(img-tn5FIQjN-1713611197653)]

3.2 Canvas新用法示例—Canvas 2D

3.2.1 布局文件(index.wxml)

3.2.2 逻辑文件(index.js)

onReady: function () {

const query = wx.createSelectorQuery() //返回一个 SelectorQuery 对象实例

query.select(‘#myCanvas’) //查询myCanvas对应的Canvas

.fields({ node: true, size: true }) //节点，可用 .node()代替

.exec((res) => { //回调结果</