一个完整的canvas画图

<page>

<canvas canvas-id="myCanvas" style="width:750rpx;height:1334rpx"/>

</page>

 

// pages/demo1/demo1.js

var app = getApp()

Page({

/**

* 页面的初始数据

*/

data: {

Height: app.dataMode.systemInfo.windowHeight,

width: app.dataMode.systemInfo.windowWidth,

covers: [],

sharelist: [{

url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',

x: 325,

y: 70,

width: 100,

height: 100

},

{

url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',

x: 80,

y: 316,

width: 590,

height: 392

},

{

url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',

x: 295,

y: 911,

width: 160,

height: 160

},

],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

this.getQaImageInfo(0)

},

/**

* 生命周期函数--监听页面初次渲染完成

* number dx图像的左上角在目标 canvas 上 x 轴的位置number dy图像的左上角在目标 canvas 上 u 轴的位置

* number dWidth在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放number dwidth在目标画布上绘制图像的高度，允许对绘制的图像进行缩放

* number x绘制文本的左上角 x 坐标位置number y绘制文本的左上角 y 坐标位置

*/

onReady: function() {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

},

getQaImageInfo: function(i) {

var that = this;

if (i < this.data.sharelist.length) {

console.log(that.data.sharelist[i].url)

wx.getImageInfo({

src: that.data.sharelist[i].url,

success: function(res) {

var covers = that.data.covers

covers.push(res.path);

console.log(res.path);

that.setData({

covers: covers

})

that.getQaImageInfo(i + 1)

},

fail: function(res) {

wx.hideLoading()

wx.showToast({

title: '获取图片失败',

icon: 'none',

image: '/image/error.png'

})

}

})

} else {

that.drawImage();

}

},

drawImage: function() {

var width = this.data.width;

var w = this.data.width / 2;

var height = this.data.Height;

var pixelRatio = width / 750;

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('#D6564D')

ctx.fillRect(0 * pixelRatio, 0 * pixelRatio, 750 * pixelRatio, 1344 * pixelRatio)

ctx.setFillStyle('white')

ctx.fillRect(40 * pixelRatio, 276 * pixelRatio, 670 * pixelRatio, 1033 * pixelRatio)

for (var i = 0; i <= this.data.sharelist.length - 1; i++) {

ctx.drawImage(

this.data.covers[i],

this.data.sharelist[i].x * pixelRatio,

this.data.sharelist[i].y * pixelRatio,

this.data.sharelist[i].width * pixelRatio,

this.data.sharelist[i].height * pixelRatio

)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('偷月亮的meOw', 278 * pixelRatio, 219 * pixelRatio)

ctx.setFontSize(38 * pixelRatio)

ctx.setFillStyle("#333333")

ctx.fillText('发起了一个抽奖活动', 80 * pixelRatio, 762 * pixelRatio)

ctx.setFontSize(30 * pixelRatio)

ctx.setFillStyle("#BBBBBB")

ctx.fillText('02月16日 11:30 自动开奖', 80 * pixelRatio, 817 * pixelRatio)

ctx.fillText('长按识别小程序，参与抽奖', 196 * pixelRatio, 1125 * pixelRatio)

ctx.fillText('抽奖说明：祝你好运气，中奖的朋友记得在', 81 * pixelRatio, 1214 * pixelRatio)

ctx.fillText('联系信息留下你的微信号哦！', 80 * pixelRatio, 1254 * pixelRatio)

//定义直线的起点坐标为(10,10)

ctx.setLineDash([3, 3]);

ctx.moveTo(41 * pixelRatio, 875 * pixelRatio);

//定义直线的终点坐标为(50,10)

ctx.lineTo(710 * pixelRatio, 875 * pixelRatio);

//沿着坐标点顺序的路径绘制直线

ctx.lineWidth = 1 * pixelRatio;

ctx.strokeStyle = "#DDDDDD";

ctx.stroke()

}

 

ctx.draw(true, setTimeout(function() {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 750,

height: 1334,

destWidth: 750,

destHeight: 1334,

canvasId: 'myCanvas',

fileType: 'jpg',

success: function(res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

})

}

})

}, 1000))

wx.showToast({

title: '分享图片生成中...',

icon: 'loading',

duration: 1000

});

}

})