canvas (vue mpvue 微信原生-wx)

别问怎么没有react和uniapp （我会跟你说公司还没用到？，lz不学 哼😕）

vue写法：

html部分

 显示如下图 显然canvas有默认大小 宽300px 高150px

 

注意点 如果你想设置自己的尺寸 一定要写行内样式 写在css里是强行放大缩小画布尺寸的 如果你了解像素的话就知道强行放大会导致失真 如下图所示 （是不是模糊了一点呢）

 data部分 有些不必要哈

 mounted部分

常用方法

this.ctx.fillStyle = 'red'/'#f00'/'rgba(0,0,0,1)' 设置文本颜色

this.ctx.measureText(this.canvasText).width 测量文本宽度 没有测量文本高度这一方法

this.myCanvas.width/height 嘿 看 这个有高度 （这句是废话 主要给你们写详细点哈 这对文本居中有用 不是摸鱼（认真脸）！）

this.ctx.font = 'normal 16px Arial' 设置文本粗细

（默认normal正常 可选bold加粗 /bolder加粗粗） 16px文本大小（记得带px） 字体（Arial 宋体）

文本颜色 格式 都设置好后

this.ctx.fillText(a,b,c) 用此方法把文本绘制出来  

注意点 abc三个参数缺一不可 绘制的文本坐标是以左下角为原点的 （这点想呸设计者）

a:文本内容 b:X轴方向坐标 c:Y轴方向坐标 （画布左上角为原点）

a:字符串文本或变量

b/c:数字或变量 不要带入计算（有鬼 呸 有BUG） 如果用到计算的 请在外面计算后赋值 然后填入变量

--------------------------------------------------

 到此 你就可以在该组件里用this.ctx拿到绘图上下文 this.myCanvas拿到画布节点啦

this.ctx具体内容如下

 实现效果就是这样子啦

微信写法 wx

wxml部分

注意点 与vue不同的是wx 多给一个 type='2d' 除获取节点略有不同外 方法几乎一致

也许你在别处看到wx.getCanvasContect('myCanvas')来获取绘图上下文

此方法为旧版 不推荐使用哈 详细请移步微信官方查看文档

 wxjs部分

data

onload

 

看到这里想必你对canvas也有了大致的了解了

此外 mpvue的写法基本与微信一致 只是数据的修改和vue一致 （乱乱的）

别急 我捋一下

只要你安装了vue/cli脚手架就可构建mpvue项目 mpvue类似uniapp

构建指令

1 vue init mpvue/mpvue-quickstart 项目名

2  cd 项目名

3 npm install / i

4  npm run dev (默认转化微信代码 指令结束后 在项目名下有一dist文件夹 里面有wx文件夹 然后使用微信开发者工具打开wx这一文件夹即可查看)

此外

npm run dev:my 支付宝

npm run dev:swan 百度

npm run dev:tt 头条

注意点 mpvue兼容vue和wx生命周期和方法 但尽量别写wx的哈 wx的API可直接用