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

JavaScript011

js<canvas>标签绘制不同粗细的线条,第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()

当一个国家由多边形轮廓组合而成时，我们如何将它转换成三角面模型呢？

对点击进行三角剖分后我们发现多边形轮廓外面也进行了三角剖分，显然这不是我们想要的。

接下来我们需要使用point-in-polygon库(判断点是否在多边形内)来去除轮廓外的三角面。

1、求出外面三角面的重心

2、使用point-in-polygon判断重心是否在轮廓内。

3、重置顶点索引

将多边形轮廓转换成mesh后可以使用射线进行拾取操作。