字节小程序
开发者社区
小程序小游戏
登录
canvas 循环画点或线条有些会丢失

canvas 循环画点或线条有些会丢失

1377浏览作者: User7168769096081965087

代码:
Page({
onLoad:function(a) {
this.reDraw();
},
reDraw: function() {
var a = this, e = tt.createCanvasContext("play"), t = [], r = [];
var drawData=new Array(
{type: "dot", color: "#000000", size: 3, data: ["107,129"]},
{type: "dot", color: "#000000", size: 3, data: ["202,125"]},
{type: "dot", color: "#000000", size: 3, data: ["116,246"]},
{type: "dot", color: "#000000", size: 3, data: ["78,19"]},
{type: "dot", color: "#000000", size: 3, data: ["149,33"]}
);
drawData.forEach(function(n, o) {
switch (t = [], r = [], n.type) {
case "dot":
console.log(n.data);
n.data.forEach(function(a, e) {
r = a.split(","), t.push({
x: r[0],
y: r[1]
});
}), a.drawDot(e, n.color, n.size, t);

break;
case "line":
n.data.forEach(function(a, e) {
r = a.split(","), t.push({
x: r[0],
y: r[1]
});
}), a.drawLine(e, n.color, n.size, t, !0);

break;
}
});
},
drawDot: function(a, e, t, r) {
if (a.setLineWidth(t),a.setFillStyle(e) , a.setStrokeStyle(e), a.beginPath(),Array.isArray(r)){
for (var n = 0, o = r.length; n < o; n++){
console.log('画点'+r[n].x+','+r[n].y)
a.arc(r[n].x, r[n].y, t / 202 * Math.PI);
}
}else{
a.arc(r.x, r.y, t / 202 * Math.PI);
}
a.closePath(), a.fill(), a.draw(!0);
}
})
应用场景
通过canvas 同时绘制多个点或多条线
相关BUG
上面代码是简化逻辑后的代码,通过forEach循环绘制多个点,发现3个点或3条线条以上有些点或线条显示不出来(通过设置debugger断点调试,却不会有任何丢点情况),在html用原生语法测试没任何问题,微信小程序同样的逻辑也没任何问题,所以判断是抖音小程序 canvas 重新封装方法有问题




最后一次编辑于 2021年01月29日
加载中