3 个回答
请 登录 后发表内容
相关问题
相关文档
- Canvas.getContext: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#参数: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#功能描述: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#返回值: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.cancelAnimationFrame: 小程序/开发/API/画布/Canvas/Canvas.cancelAnimationFrame
刚刚大致看了下你的代码，似乎也没什么问题
你可以先调试下：
1、设置下外面的view 状态 position:relative；display:block.
2、尝试下层级设置 index
3、如果不行的话，老的写法我也遇到过类似的问题
你可以试下换成新的2.9版本的源生H5写法，给你个帖子 你可以看下
https://developers.weixin.qq.com/community/develop/article/doc/000242073903a04e082ab595b52013
把canvas自定义图片生成图片：
wx.canvasToTempFilePath ({
destWidth: 150,
destHeight: 100,
canvasId: 'mycanvas',
success: function (res)
{
console.log('1212' + res.tempFilePath);
},
fail: function (res) {console.log(res);}
},this);
只显示图片，想办法把canvas隐藏掉，但不要删除
上代码贴纸
<view class='item2-clock'><canvas class='bgCanvas' canvas-id='bgCanvas'></canvas><view class='stepText'>{{countDown}}</view></view>开发工具上没问题的，页面滑动画布也不错位，真机直接如上图第二个直接错位了
initializeAnnulus: function () {let ctx = this.data.ctx;ctx.setLineWidth(16)ctx.arc(100, 100, 92, 0, 2 * Math.PI)ctx.setStrokeStyle('white')ctx.stroke()ctx.beginPath()ctx.setLineCap('round')ctx.setLineWidth(10)ctx.arc(100, 100, 92, 1.5 * Math.PI, 1.5 * Math.PI, true)ctx.setStrokeStyle('green')ctx.stroke()ctx.draw()},destory() {clearInterval(valHandle) //销毁定时器this.setData({remainTime: 0,countDown: '',ctx: '',endTime: 0})},clickStartBtn: function () {let ctx = this.data.ctx;// console.log("倒计时动画开始")var that = thisvar step = that.data.remainTime; //定义计时var num = 0;clickStartBtn: function () {let ctx = this.data.ctx;// console.log("倒计时动画开始")var that = thisvar step = that.data.remainTime; //定义计时var num = 0;clearInterval(valHandle)function drawArc(endAngle) {ctx.setLineWidth(16)ctx.arc(100, 100, 92, 0, 2 * Math.PI)ctx.setStrokeStyle('white')ctx.stroke()ctx.beginPath()ctx.setLineCap('round')ctx.setLineWidth(10)if (endAngle >= Math.PI) {ctx.arc(100, 100, 92, endAngle - 0.5 * Math.PI, 0.5 * Math.PI + endAngle, true)} else {ctx.arc(100, 100, 92, endAngle - 0.5 * Math.PI, 1.5 * Math.PI, true)}ctx.setStrokeStyle('green')ctx.stroke()ctx.draw()}valHandle = setInterval(function () {step += 1;let formatTime = that.getFormat(step);let countDown = `${formatTime[2]}:${formatTime[1]}:${formatTime[0]}`;that.setData({countDown: countDown,endTime: step});num += 1 / 30drawArc(num * Math.PI)}, 1000)},