canvas实战：微信小程序 vs Vue区别

1、获取canvas画布：
vue：
document.getElementById(“myCanvas”).getContext(“2d”);

微信小程序：
const query = _this.createSelectorQuery();    
query.select(‘#myCanvas’ + canvasKey).fields({         
 node: true,          
size: true        
}).exec((res) => {          
const canvas = res[0].node;
const ctx = canvas.getContext(‘2d’);
})

2、动态设置数据
vue:
this.params=’demo’;

微信小程序：
this.data.params = ‘demo’;

3、filters过滤器：
vue:
export default{
methods:{},
filters:{
format(val){
return val+1;
}
}
}
微信小程序：
需要借助wxs实现：
demo.wxs
var projectNormal = function (num) {    
 return num+1;
};
module.exports = {
projectName: projectName
};

page.wxml
<wxs src=”./demo.wxs” module=”format”></wxs>
<view>
{{format.projectNormal (‘456456’)}}
</view>

4、canvas中判断图片加载完成
vue:
let img = new Image();
img.src = “http://…..”;
img.onload() = () => { ctx.drawImage(img, 0, 0, width, height);}

小程序：
let seal = canvas.createImage();
seal.src = “http://…..”;
seal.onload = () => {
ctx.drawImage(img, 0, 0, width, height);
}

5、wxs中的json执行的是标准的json格式，key需要带引号
let xx={
d:{
k:”0″,
v:”1″
}
}
console.log(xx.d.k);
vue：正常读取

微信小程序的wxs文件：

持续更新中…