feat: 支持canvas2d

[0JARVIS0]

No description provided.

[MakerGYT]

4处需要修复 @0JARVIS0

对于支持canvas2D:

1. 如果字体是多个单词如Times New Roman(该字体无需通过网络加载)会出现开发者工具正常而真机仍是默认字体的问题，原因是拼接CSS font 语法字符串时没有将其加引号，故

// pen.js
// line 219
+ const fontFamily = view.css.fontFamily || 'sans-serif';
- this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? view.css.fontFamily : 'sans-serif'}`;
+ this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px "${fontFamily}"`; 

2. saveImgToLocal报错{"errMsg":"canvasToTempFilePath: fail canvas is empty"},原因是如果canvas type="2d" 时，需要传入 canvas组件实例，故:

// painter.js
// line 757
+ canvas: this.properties.use2D ? that.canvasNode: null,
// line 782
- const canvasNode = res[0].node;
+ const canvasNode = this.canvasNode = res[0].node;

3. 画布尺寸较大真机会报错native buffer exceed size limit.，原因是dpr较大,故:

// painter.js
// line 785
- const dpr = wx.getSystemInfoSync().pixelRatio
+ const dpr = wx.getSystemInfoSync().pixelRatio <=2 ? wx.getSystemInfoSync().pixelRatio : 2
// pen.js
// line 250
- const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
+ const ratio = (getApp().systemInfo.pixelRatio && getApp().systemInfo.pixelRatio <=2) ? getApp().systemInfo.pixelRatio : 2;

对于图像模糊问题:issue248

// painter.js
// line 756
- destWidth: that.canvasWidthInPx,
+ destWidth: that.canvasWidthInPx * getApp().systemInfo.pixelRatio,
- destHeight: that.canvasHeightInPx,
+ destHeight: that.canvasHeightInPx * getApp().systemInfo.pixelRatio,

另:

// painter.js
// line 773 width与height参数未使用，调用该函数处同步修改
- getCanvasContext(use2D, id, width, height) {
+ getCanvasContext(use2D, id) {

[mosquito18]

为什么报错用不了呢？

[0JARVIS0]

为什么报错用不了呢？

是直接把分支拉下来，用开发者工具打开就会有这样的报错吗？如果不是，能否提供一下稳定复现这个现象的代码片段呢？

[chj1095748709]

请问一下，海波啊背景图"mode": "scaleToFill" 预览没问题，aspectFil 预览图片空白不显示是什么原因呢