Question

js<canvas>标签绘制不同粗细的线条

var cv = document.getElementById('canvas');
var g = cv.getContext('2d');
//绘制线条1
g.lineWidth=5;
g.moveTo(x1,y1);
g.lineTo(x2,y2);
g.stroke();
//绘制线条2
g.lineWidth=10;
g.moveTo(x3,y3);
g.lineTo(x4,y5);
g.stroke();
//线条1粗细也开始变成10了，为什么？怎么样绘制不同粗细的线条？

Answer 1

请在绘制每条线条前，用beginPath()重置路径，这样每条线条的样式就可以单独设置了：

var cv = document.getElementById('canvas');
var g = cv.getContext('2d');
//绘制线条1
g.beginPath(); //看这行
g.lineWidth=5;
g.moveTo(x1,y1);
g.lineTo(x2,y2);
g.stroke();
//绘制线条2
g.beginPath();  //还有这行
g.lineWidth=10;
g.moveTo(x3,y3);
g.lineTo(x4,y5);
g.stroke();

Answer 2

jmGraph 支持小程序的canvas库
https://github.com/jiamao/jmgraph
可以试下这个库，每个方块都可以做成一个对象，像操作dom一样。

Answer 3

先关闭路径再画线条二