企业为何要做小程序_微信小程序使用canvas的画图

微信小程序使用canvas的画图操作示例       这篇文章主要介绍了微信小程序使用canvas的画图操作,结合实例形式较为详细的分析了微信小城序基于canvas的画图操作相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下:

基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。

1、下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个 canvas 标签,一定要写上canvas-id='canvas的id',这是必须条件,如下面代码:

 canvas canvas-id='canvas' /canvas 
 button bindtap='chooseImage' 相册 /button 

2、上面canvas的宽高都是js控制的,使用 wx.getSystemInfo获取屏幕的可见宽高。代码如下:

wx.getSystemInfo({
 success: function (res) {
 that.setData({
 windowW: res.windowWidth,
 windowH: res.windowHeight

相当的详细,有没有!!!

3、重点注意一下:在微信小程序的canvas画图中如果使用了网络图片,一定要先把这张图片读取下载下来(可使用wx.downloadFile),存为网络格式的图片!!!

上面这个操作是避免网络状况不好的时候canvas画图完成了背景图片确显示不出来的情况,同时,这个图片所在的域名必须在微信公众平台配置一下,代码如下:

wx.downloadFile({
 url: '图片路径',
 success: function (res) {
 that.setData({
 canvasimgbg: res.tempFilePath

4、 我上面wxml代码里面写了一个按钮,使用wx.chooseImage调用了系统相册,所以说,我们选择一张图片画进canvas也是可以的,代码如下:

wx.chooseImage({
 success: function (res) {
 that.setData({
 chooseimg: res.tempFilePaths[0]

5、下面就是cancas画图啦,画和屏幕一样宽高的,然后我们再写一行字哈哈哈,代码如下:

var that = this;
var windowW = that.data.windowW;
var windowH = that.data.windowH;
var canvasimgbg = that.data.canvasimgbg;
var canvasimg1 = that.data.chooseimg;
canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH);
canvas.drawImage(canvasimg1, 0, 10, 200, 200);
canvas.setFontSize(50)
canvas.fillText('Hello', 200, 200)
canvas.draw(true,setTimeout(function(){
 that.daochu()
},1000));

使用canvas.draw()画图,完毕之后直接wx.canvasToTempFilePath导出图片

6、导出图片,代码如下:

var that = this;
var windowW = that.data.windowW;
var windowH = that.data.windowH;
wx.canvasToTempFilePath({
 x: 0,
 y: 0,
 width: windowW,
 height: windowH,
 destWidth: windowW,
 destHeight: windowH,
 canvasId: 'canvas',
 success: function (res) {
 console.log(res)
 wx.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success(res) {
 wx.previewImage({
 urls: [res.tempFilePath],

上面这些代码已经完成啦!!!

主要就是各位使用的时候看需要什么样的啦!

下面还是附上完整的代码把!

// pages/canvas/canvas.js
Page({
 * 页面的初始数据
 data: {
 onLoad: function (options) {
 var that = this;
 that.sys();
 ();
 sys: function () {
 var that = this;
 wx.getSystemInfo({
 success: function (res) {
 that.setData({
 windowW: res.windowWidth,
 windowH: res.windowHeight
 bginfo: function () {
 var that = this;
 wx.downloadFile({
 url: '图片链接',//注意公众平台是否配置相应的域名
 success: function (res) {
 that.setData({
 canvasimgbg: res.tempFilePath
 canvasdraw: function (canvas) {
 var that = this;
 var windowW = that.data.windowW;
 var windowH = that.data.windowH;
 var canvasimgbg = that.data.canvasimgbg;
 var canvasimg1 = that.data.chooseimg;
 canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH);
 canvas.drawImage(canvasimg1, 0, 10, 200, 200);
 canvas.setFontSize(50)
 canvas.fillText('Hello', 200, 200)
 canvas.draw(true,setTimeout(function(){
 that.daochu()
 },1000));
 // canvas.draw();
 daochu: function () {
 console.log('a');
 var that = this;
 var windowW = that.data.windowW;
 var windowH = that.data.windowH;
 wx.canvasToTempFilePath({
 x: 0,
 y: 0,
 width: windowW,
 height: windowH,
 destWidth: windowW,
 destHeight: windowH,
 canvasId: 'canvas',
 success: function (res) {
 console.log(res)
 wx.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success(res) {
 wx.previewImage({
 urls: [res.tempFilePath],
 chooseImage: function () {
 var that = this;
 var canvas = wx.createCanvasContext('canvas');
 wx.chooseImage({
 success: function (res) {
 that.setData({
 chooseimg: res.tempFilePaths[0]
 that.canvasdraw(canvas);

希望本文所述对大家微信小程序开发有所帮助。