微信小程序 canvas bug
发布于 4 年前 作者 minshao 2819 次浏览 来自 问答
  • 当前 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

1 回复

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

回到顶部