图片才写圆形,安卓和模拟器可以裁切圆形,ios不能裁切
ctx.save()
ctx.beginPath()
ctx.arc(wWith * 0.129,
wHeight * 0.858,
wWith * 0.075, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(
tempFiles.header,
wWith * 0.05,
wHeight * 0.815,
wWith * 0.155,
wWith * 0.155)
ctx.restore()
ctx.draw(true)
当使用ctx.draw(true) 的时候ios不能裁切,显示方图
ctx.draw()可以裁切,但是会把原来的画图都会清掉
我用最新版微信没能重现
你好,请提供一下完整的复现代码示例。
var app = getApp();
var ringChart = null;
Page({
data: {
canvasWidth: wx.getSystemInfoSync().windowWidth,
},
onReady: function (e) {
const ctx = wx.createCanvasContext('myCanvas')
var that = this
var wHeight = wx.getSystemInfoSync().windowWidth * 1.778
var wWith = wx.getSystemInfoSync().windowWidth
//that.downloadAllFile(function (tempFiles) {
ctx.drawImage(
"../../imgs/bg.png",
0, 0, wWith, wHeight)
ctx.draw(true)
ctx.save()
ctx.beginPath()
ctx.rect(wWith * 0.14, wHeight * 0.25, wWith * 0.72, wWith * 0.72)
ctx.clip()
ctx.drawImage(
"../../imgs/1.png",
wWith * 0.14, wHeight * 0.25,
wWith * 0.72,
((wWith * 0.72) / 750) * 1334
)
ctx.restore()
ctx.draw(true)
ctx.setFontSize(14)
ctx.setFillStyle('#888888')
ctx.fillText(new Date(),
wWith * 0.14,
wHeight * 0.69
)
ctx.draw(true)
ctx.setFontSize(18)
ctx.setFillStyle('#222222')
ctx.fillText("ttttttt",
wWith * 0.24,
wHeight * 0.875
)
ctx.draw(true)
ctx.setFontSize(14)
ctx.setFillStyle('#666666')
ctx.fillText('邀请你一起来围观' + "title",
wWith * 0.25,
wHeight * 0.92)
ctx.draw(true)
ctx.fillText('长按二维码,评论起来!',
wWith * 0.25,
wHeight * 0.96)
ctx.draw(true)
ctx.save()
ctx.beginPath()
ctx.arc(wWith * 0.129,
wHeight * 0.858,
wWith * 0.075, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(
"../../imgs/2.png",
wWith * 0.05,
wHeight * 0.815,
wWith * 0.155,
wWith * 0.155)
ctx.restore()
ctx.draw(true)
}
});
这个为安卓截图
ios 切图 ios 11.0.3 微信版本6.5.20
左下角这个是模拟器上的圆图