浅谈Canvas

最近接手个关于小程序canvas的需求  对canvas的了解也较之前更加的深
在这里总结一下使用canvas的几点技巧（这里以小程序canvas为例子 html5canvas类同）
一、cnavas代码量问题
使用过canvas的朋友应该都被canvas那庞大的代码量吓到过
举个栗子 用canvas写出一段话 那我们至少要使用2段代码
 

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('PHP是世界上最好的语言', 20, 20)

ctx.draw()

当然拉 理想很美好 显示很残酷 正常使用情景下我们还要设置字体颜色，对齐方式。。。
那样子我们平均要5行代码左右
那一个canvas里面的内容很多的情况下 这个代码就很庞然大物了，那我们如何来收拾这么个臃肿的胖子呢？
 

//这里以小程序为例子 html5canvas直接let 一个对象也一样
data:{
    canvasData:{
      txt: `javascript`//字样
      size: 6, //字体大小
      color: "#fff", //字体颜色
      x: 5, //距离左边的距离
      y: 15, //距离顶部的距离
      shadow: true //是否具有阴影
    }
}
//绘制方法
const ctx = wx.createCanvasContext('myCanvas')
for (var i = 0; i < this.data.canvasData.length; i++