小程序Canvas绘图：实现自定义海报分享

在当今社交网络-时代，互动就是一种非常畅销的互动传播方式。针对相同市场需求，我们可以通过各种工具建立出来独一无二的海报，以达至最终的互动目的。于是乎，如何同时实现通过微信小程序建立一张自主性弱、能高效率传播的海报变成了我们重点考量的问题。

小程序中，Canvas就是我们用以绘制和互动海报的强悍工具。与传统的图片互动相同，Canvas 可以在画布上任一绘制文本、图片、图形，还可以对每一个零件展开任一转换、样式调整，最终获得一张用在互动场景中的图片。

本文将详尽了解小程序Canvas在绘图上的应用领域与同时实现，以及如何建立您自己的自定义海报互动。

Canvas的基本概念与API

Canvas就是HTML5 标准中的一个新元素，它可以基于JavaScript绘制图形。通过 Canvas，只要采用直观的JavaScript代码，就可以使你的网页中同时实现图形动态展现、各种图片处置等多种功能。

Canvas机制就是基于一些堆栈的方式去绘图的。“堆栈操作方式”可以认知为调用某方法前留存当前状态，然后调用方法继续执行适当的操作方式，最后通过弹头出来调用之前留存的状态恢复正常之前的画布状态。通过这个操作方式方式，我们可以快速同时实现画图、删掉图形、转换样式等各种功能。

小程序CanvasAPI与HTML 5中的CanvasAPI存有许多相同的方法，有些API就可以在小程序中采用，该API中包含一些与小程序 UI 系统二者女团的特定方法，比如chooseImage()和saveImageToPhotosAlbum()等。在这里列出几个常用的CanvasAPI，如下：

- ①createCanvasContext：以获取画布上下文对象

- ②drawImage：在画布上绘制图片

- ③setFillStyle：设置画布的填充色

- ④setFont：设置字体样式

- ⑤fillText：在画布上绘制文本

- ⑥drawRect：在画布上绘制矩形

同时实现小程序Canvas绘图

介绍了Canvas的基本概念和API，接下来我们看看一下如何通过Canvas在小程序中同时实现自定义海报的绘制。

第一步，建立一个紧固大小的画布，并通过createCanvasContext建立一个绘制上下文对象。

```

let context = wx.createCanvasContext('myCanvas')

context.setTextBaseline('top');

context.setFontSize(16);

context.setFillStyle('#000000');

```

通过设置画布的收录机信息和背景，并使画布的大小产生一个紧固的效果，防止了因为画布大小不定，导致的头像大小、背景色等问题。

第二步，通过CanvasAPI中提供更多的方法在画布上绘制各种要素。

绘制所须要的图形、图片、文字等，本质上就是通过 CanvasAPI 提供更多的一系列方法去同时实现的。这里我们可以通过定义各个图形、文本和图片的样式从而缔造出来一个视觉效果非常不好的自定义海报。

我们可以通过setFillStyle设置画布填充色，通过setFont设置字体样式，修改文字的大小和颜色，并且通过drawImage将一些其他要素嵌入至我们的自定义海报上。此外，还可以通过drawRect方法在画布上绘制轻松的矩形。

接下来就是一些常用的方法同时实现：

绘制文字：

```

context.fillText(text1, x, y)

```

绘制图片：

```

context.drawImage(imagePath, 60, 120, 110, 110)

```

绘制矩形：

```

context.drawRect(70, 300, 610, 310)

```

绘制线段：

```

context.moveTo(70, 350)

context.lineTo(680, 350)

```

第三步，通过saveImageToPhotosAlbum方法留存绘制不好的自定义海报。

```

wx.canvasToTempFilePath({

canvasId: 'myCanvas',

success(res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success() {

wx.showToast({

title: '海报已完成',

icon: 'success'

});

}

})

}

})

```

在这里，我们通过saveImageToPhotosAlbum方法将绘制不好的自定义海报保存起来，以便于互动时采用。当用户对海报展开留存的时候，还可以通过showToast方法展现一些提示信息。

总结

在小程序中，通过Canvas绘制自定义海报就是一个非常新颖的功能。它可以同时实现针对相同场景的相同市场需求的海报，同样可以协助我们提高互动宣传的效果和传播速度。通过同时实现上面的方法，可以在我们的小程序中快速建立一张独一无二的、视觉效果迷人的自定义海报。同时，对于小程序的优化和调试，强烈建议通过微信开发者工具，协调console调试器等功能，更好的研发与优化小程序。