/* 获取 canvas 实例 */
const context = node.getContext('2d')
context.fillStyle = 'red'
/* 设置字体样式 大小 字体类别 */
context.font = 'normal 400 12px PingFangSC-Regular',
context.fillText('hello,world', 200, 10)
context.fillStyle = 'orange'//背景色
context.translate(this.rpx2px(750 / 2), this.rpx2px(500 / 2))//位置定位
// 再旋转30度
// context.rotate(90 * Math.PI / 180);
context.rotate(270 * Math.PI / 180)
//绘制图形 - 坐标，尺寸
context.fillRect(this.rpx2px(0), this.rpx2px(0), this.rpx2px(750), this.rpx2px(500))
context.fillStyle = '#000000'
context.font = `bold ${this.rpx2px(80)}px 宋体`
context.textAlign = "center"
// 文本水平居中
context.fillText('你好世界', this.rpx2px(750 / 2), this.rpx2px(100))
const img = node.createImage()
img.onload = () => {
this._img = img
//绘制图形操作
context.drawImage(this._img, 50, 0, 150, 50)
//从这边重新获取画布就可以获得变形后的数据内容
var query = wx.createSelectorQuery();
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
//获取画布信息
var canvas = res[0].node;
//输出内容
wx.canvasToTempFilePath({
canvas: canvas,
success: (resx) => {
console.log(resx)
}
})
})
//如果要恢复画布的数据，2个方案。
//1、继续执行 旋转事件，然后再绘制画布，再获取
//2、或者2个画布，一个绘制原始数据，一个不可见状态 原始数据同步过来以后变形再获取
}
//赋予地址，开始onload事件
img.src = './car.png';
//获取事件写这边不会获取得到变形数据
},
