canvas 图片圆 圆角圆

ctx.save()

ctx.beginPath()

ctx.arc(375 * pixelRatio, 168 * pixelRatio, 65 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 310 * pixelRatio, 103 * pixelRatio, 130 * pixelRatio, 130 * pixelRatio)

ctx.restore()

 

 

var app = getApp()

Page({

/**

* 页面的初始数据

*/

data: {

Height: app.dataMode.systemInfo.windowHeight,

app.dataMode.systemInfo.windowWidth,

covers: [],

sharelist: [{

url: 'https://ccian.com/1010-16.png',

x: 0,

y: 0,

750,

height: 1887

},

{

url: 'https://ccian.com/1010-7.png',

x: 103,

y: 463,

42,

height: 39

},

{

url: 'https://ccian.com/1010-9.png',

x: 264,

y: 463,

53,

height: 40

},

{

url: 'https://ccian.com/1010-3.png',

x: 437,

y: 463,

42,

height: 40

},

{

url: 'https://ccian.com/1010-5.png',

x: 608,

y: 463,

37,

height: 40

},

{

url: 'https://ccian.com/1010-12.png',

x: 64,

y: 1052,

105,

height: 105

},

{

url: 'https://ccian.com/1010-15.png',

x: 237,

y: 1052,

105,

height: 105

},

{

url: 'https://ccian.com/1010-14.png',

x: 409,

y: 1052,

105,

height: 105

},

{

url: 'https://ccian.com/1010-13.png',

x: 582,

y: 1052,

105,

height: 105

},

{

url: 'http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg',

x: 294,

y: 1588,

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() {

},

roundRect(ctx, x, y, w, h, r) {

// 开始绘制

ctx.beginPath()

// 因为边缘描边存在锯齿，最好指定使用 transparent 填充

ctx.setFillStyle('transparent')

// ctx.setStrokeStyle('transparent')

// 绘制左上角圆弧

ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

// 绘制border-top

ctx.moveTo(x + r, y)

ctx.lineTo(x + w - r, y)

ctx.lineTo(x + w, y + r)

// 绘制右上角圆弧

ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

// 绘制border-right

ctx.lineTo(x + w, y + h - r)

ctx.lineTo(x + w - r, y + h)

// 绘制右下角圆弧

ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

// 绘制border-bottom

ctx.lineTo(x + r, y + h)

ctx.lineTo(x, y + h - r)

// 绘制左下角圆弧

ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

// 绘制border-left

ctx.lineTo(x, y + r)

ctx.lineTo(x + r, y)

ctx.fill()

// ctx.stroke()

ctx.closePath()

// 剪切

ctx.clip()

},

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')

 

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.save()

ctx.beginPath()

ctx.arc(375 * pixelRatio, 168 * pixelRatio, 65 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 310 * pixelRatio, 103 * pixelRatio, 130 * pixelRatio, 130 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(611 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 566 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(539 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 494 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(461 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 416 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(385 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 340 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(311 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 266 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(239 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 194 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(161 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 116 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

ctx.save()

ctx.beginPath()

ctx.arc(90 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

ctx.setStrokeStyle('#f82a5e')

ctx.stroke()

ctx.clip()

ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 45 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)

ctx.restore()

//圆形图片带边框完毕

//圆角图片开始

// ctx.save()

// ctx.beginPath()

// ctx.arc(90 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)

// ctx.clip()

// ctx.restore()

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('用户名', 335 * pixelRatio, 272 * pixelRatio)

ctx.setFontSize(36 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('我已完成', 304 * pixelRatio, 419 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#44289E")

ctx.fillText('看图', 97 * pixelRatio, 543 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#44289E")

ctx.fillText('传图', 263 * pixelRatio, 543 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#44289E")

ctx.fillText('开店', 431 * pixelRatio, 543 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#44289E")

ctx.fillText('领红包', 585 * pixelRatio, 543 * pixelRatio)

ctx.setFontSize(36 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('最近出售图片', 40 * pixelRatio, 670 * pixelRatio)

ctx.setFontSize(36 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('入门福利', 39 * pixelRatio, 984 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('红包多多', 61 * pixelRatio, 1198 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('尊贵标识', 234 * pixelRatio, 1198 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('开店赚钱', 406 * pixelRatio, 1198 * pixelRatio)

ctx.setFontSize(28 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('版权保护', 579 * pixelRatio, 1198 * pixelRatio)

ctx.setFontSize(36 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('他们都在玩', 39 * pixelRatio, 1334 * pixelRatio)

ctx.setFontSize(30 * pixelRatio)

ctx.setFillStyle("#FFFFFF")

ctx.fillText('长按识别小程序二维码', 226 * pixelRatio, 1803 * pixelRatio)

}

ctx.save()

this.roundRect(ctx, 42 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)

ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 42 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)

ctx.restore()

ctx.save()

this.roundRect(ctx, 270 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)

ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 270 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)

ctx.restore()

ctx.save()

this.roundRect(ctx, 500 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)

ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 500 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)

ctx.restore()

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

wx.canvasToTempFilePath({

x: 0,

y: 0,

750,

height: 1887,

destWidth: 750,

destHeight: 1887,

canvasId: 'myCanvas',

fileType: 'jpg',

success: function(res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

})

}

})

}, 1000))

wx.showToast({

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

icon: 'loading',

duration: 1000

});

}

})