收藏
回答

微信小程序 canvas bug

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 7.0.3 2.6.0

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


两个圆底部之间的连线  在小程序中 丢失;


bug代码部分,h5中会有 两个圆底部连线  小程序中 没有

context.rotate(angle);

context.lineTo(0, -l + r);




- 提供一个最简复现 Demo



 //要画的边数  m   

    // 半径  r

    // 便宜的坐标 x y

    // 开始的角度  start

    // 立中心的距离  l

<canvas style="width: 500px; height: 500px;" canvas-id="firstCanvas" class='canvas'></canvas>

    

   

var context = wx.createCanvasContext("firstCanvas");

drawPath(250, 250, 9, 35, 90, 200);

function drawPath(x, y, m, r, start, l) {

context.setStrokeStyle("red")


context.translate(x, y);



var angle = Math.PI * 2 / m;


var startAngle = start * Math.PI * 2 / 360;

var endAngle = (start + 360) * Math.PI * 2 / 360;

for (var i = 0; i < m; i++) {

context.beginPath();


context.arc(0, -l, r, startAngle, endAngle);


context.stroke();




context.restore();//返回原始状态


context.rotate(angle);


context.lineTo(0, -l + r);


context.lineTo(0, 0);


var gradient = context.createLinearGradient(0, 0, -170, 0);


gradient.addColorStop("0", "#D0A641");


gradient.addColorStop("0.5", "blue");


gradient.addColorStop("1.0", "red");


// 用渐变进行填充


context.shadowBlur = 10;


context.shadowColor = "#D0A641";


context.strokeStyle = gradient;




context.lineWidth = 5;


context.stroke();

}

context.draw();

}


还有一个问题 能不能 拿到当前 context画笔 当前的坐标(x,y),有没有这样的api 或者 如何获取 当前画笔坐标?

而且真机测试  微信扫码  微信端会崩溃  跳转不到页面  微信version 7.0.3



最后一次编辑于  02-17  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 娇华
    娇华
    02-18

    请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    02-18
    赞同
    回复