微信小程序使用canvas的画图操作示例

更新时间：2019年01月18日 11:32:13 作者：impossible1994727

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

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

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

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

<canvas canvas-id='canvas' style='width:{{windowW}}px;height:{{windowH}}px'></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();
  that.bginfo();
 },
 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);
   },
  })
 }
})

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

您可能感兴趣的文章:

asp.net HttpHandler实现图片防盗链
这个例子来自于《Maximizing ASP.NET Real World, Object-Oriented Development》一书, 需要的朋友可以参考下。
2009-11-11
基于JavaScript代码实现随机漂浮图片广告
在网上有很多这样的代码，不过未必符合W3C标准，因为在头部加上<!DOCTYPE html>类似标签之后，漂浮效果就会失效，下面分享一个符合标准的漂浮代码，使需要的朋友免去大量改造代码的繁琐
2016-01-01
javascript对HTML字符转义与反转义
这篇文章主要介绍了javascript对HTML字符转义与反转义，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
JsRender for index循环索引用法详解
这篇文章主要介绍了JsRender for index循环索引用法,以实例形式详细分析了JsRender中循环的用法,需要的朋友可以参考下
2014-10-10
解决layui调用自定义方法提示未定义的问题
今天小编就为大家分享一篇解决layui调用自定义方法提示未定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
这篇文章主要介绍了 JavaScript 实现自己的安卓手机自动化工具脚本,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
Bootstrap模态对话框中显示动态内容的方法
今天小编就为大家分享一篇Bootstrap模态对话框中显示动态内容的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
javascript实现在指定元素中垂直水平居中
当谈到网页的布局中，居中问题一直得不到很有效的解决，居中通常是相对于某一个元素的，比如我们经常所说的屏幕居中的问题，我们了解父元素的信息越多，我们就越能更加容易的实现居中布局。下面我们通过具体的实例来看看javascript如何来实现垂直水平居中
2015-09-09
JavaScript使用canvas实现flappy bird全流程详解
这篇文章主要介绍了JavaScript使用canvas实现flappy bird流程，canvas是HTML5提供的一种新标签，它可以支持JavaScript在上面绘画，控制每一个像素，它经常被用来制作小游戏，接下来我将用它来模仿制作一款叫flappy bird的小游戏
2023-03-03
JS数组合并push与concat区别分析
这篇文章主要介绍了JS数组合并push与concat区别,结合实例形式分析了JavaScript中针对数组合并操作使用push与concat的区别,需要的朋友可以参考下
2015-12-12

微信小程序使用canvas的画图操作示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具