## canvas-任意画多个凸多边形 原

duduYZ

html：

``<canvas id="canvas" width="800" height="500">当前浏览器不支持canvas，请更换浏览器使用！</canvas>``

js：

``````    var canvas = document.getElementById("canvas") //获取到canvas元素
var context = canvas.getContext("2d") //获取上下文的环境

function drawPoint(cxt, x, y, w, borderWidth, borderColor, fillColor) {
cxt.beginPath()
cxt.moveTo(x - w, y - w)
cxt.lineTo(x + w, y - w)
cxt.lineTo(x + w, y + w)
cxt.lineTo(x - w, y + w)
cxt.lineWidth = borderWidth
cxt.strokeStyle = borderColor
cxt.fillStyle = fillColor
cxt.closePath()
cxt.fill()
cxt.stroke()
}

function drawPolygon(cxt, dbl, borderWidth, borderColor, fillColor, t) {
for (var i = 0; i < dbl.length; i++) {
drawPoint(cxt, dbl[i].x, dbl[i].y, 2, 1, 'red', 'skyblue')
}
cxt.moveTo(dbl[0].x, dbl[0].y)
for (var i = 1; i < dbl.length; i++) {
cxt.lineTo(dbl[i].x, dbl[i].y)
}
if (t) {
cxt.closePath()
cxt.fillStyle = fillColor
cxt.fill()
}
cxt.lineWidth = borderWidth
cxt.strokeStyle = borderColor
cxt.stroke()
}

function z(x, y, x1, y1, x2, y2) {
if (((x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)) > 0) {
return 1
} else if (((x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)) < 0) {
return 3
} else {
return 2
}
}``````

``````var timeId;
var dbl = [], arr = []
canvas.ondblclick = function () {
if (arr.length > 2) {
drawPolygon(context, arr, 1, 'red', "rgba(0, 0, 0, .1)", true)
// 这里执行完成闭合之后，清空坐标数组，便于另外新建
dbl = arr
arr = []
}
}
canvas.onclick = function (e) {
clearTimeout(timeId);
timeId = setTimeout(function () {
x = e.offsetX
y = e.offsetY
if (arr.length >= 3) {
var n1= z(arr[2].x, arr[2].y, arr[0].x, arr[0].y, arr[1].x, arr[1].y)
var n2 = z(arr[arr.length - 1].x, arr[arr.length - 1].y, arr[0].x, arr[0].y, x, y)
var n3= z(arr[1].x, arr[1].y, arr[0].x, arr[0].y, x, y)
var n4= z(arr[arr.length - 1].x, arr[arr.length - 1].y, arr[arr.length - 2].x, arr[arr.length - 2].y, x, y)
if (n1=== 1) {
// 代表第2点在线左边，这时判断第4个点的位置，如果在左边就不允许落点
if (n2 === 1 || n3=== 1 || n4=== 1) {
return
}
}
if (n1=== 3) {
// 代表第2点在线右边，这时判断第4个点的位置，如果在右边就不允许落点
if (n2 === 3 || n3=== 3 || n4=== 3) {
return
}
}
arr.push({x: x, y: y})
}
arr.length < 3 ? arr.push({x: x, y: y}) : null
drawPolygon(context, arr, 1, 'blue')

}, 250)

}``````

### duduYZ

Vue + Canvas项目总结

2018/07/24
0
0
【转】2019春季阿里笔试算法题——判断一个点是否在多边形内部

Jinlong_Xu
07/17
0
0

2013/12/25
444
0
Codility每周一课：P99.5 PolygonConcavityIndex

P99.5 PolygonConcavityIndex Check whether a given polygon in a 2D plane is convex; if not, return the index of a vertex that doesn't belong to the convex hull. P99.5 凸包内点 判......

AiFan
03/21
0
0

pricker
2015/09/24
73
0

Eureka应用注册与集群数据同步源码解析

Java学习录
18分钟前
4
0
Java描述设计模式(15)：责任链模式

29分钟前
6
0

1、内存申请：数组在内存上是连续的空间；链表,内存地址上可以是不连续的。 2、查询速度：数组可以随机访问，链表必须顺序访问，即从首个元素开始遍历，逐个查找，所以数组查询很快。 3、写入...

37分钟前
6
0
HashMap源码分析

V丶zxw
56分钟前
5
0
Python字符串或JSON字符串转字典dict、列表list

7
0