使用canvas画多个多边形，并在质心填充文字

<!DOCTYPE html>

<head>

<title>canvas绘制多边形</title>

</head>

<body>

<style>

扫描二维码关注公众号，回复： 13125483 查看本文章

canvas {

border: 1px solid #333;

display: block;

}

input {

width: 100px;

margin-left: 200px;

margin-top: 650px;

}

#canvas {

position: absolute;

left: 0;

top: 0;

z-index: 1;

cursor: crosshair;

}

#canvasSave {

position: absolute;

left: 0;

top: 0;

}

</style>

var can = document.getElementById("canvas");

var ctx = can.getContext('2d');

var canSave = document.getElementById("canvasSave");

var ctxSave = canSave.getContext('2d');

var allPoint = [];

var pointX, pointY;

var pointArr = [];//存放坐标的数组

ctx.strokeStyle = 'rgba(102,168,255,1)';//线条颜色

ctx.lineWidth = 4;//线条粗细

ctxSave.strokeStyle = 'rgba(102,168,255,1)';//线条颜色

ctxSave.lineWidth = 4;//线条粗细

var oIndex = -1;//判断鼠标是否移动到起始点处，-1为否，1为是

/*点击画点*/

$(can).click(function (e) {

var pointObj = getPolygonAreaCenter(pointArr)

if (e.offsetX || e.layerX) {

pointX = e.offsetX == undefined ? e.layerX : e.offsetX;

pointY = e.offsetY == undefined ? e.layerY : e.offsetY;

var piX, piY;

if (oIndex > 0 && pointArr.length > 0) {

piX = pointArr[0].x;

piY = pointArr[0].y;

console.log(piX, piY, "if")

//画点

makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');

canvasSave(pointArr);//保存点线同步到另一个canvas

// saveCanvas();//生成画布

saveCanvas()

ctxSave.fillStyle = 'red';

ctxSave.font = '20px sans-serif';

ctxSave.fillText('hello world!', pointObj.x, pointObj.y);

pointArr = []

} else {

piX = pointX;

piY = pointY;

makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');

console.log(piX, piY, "else")

pointArr.push({ x: piX, y: piY });

canvasSave(pointArr);//保存点线同步到另一个canvas

}

});

/* */

$(can).mousemove(function (e) {

if (e.offsetX || e.layerX) {

pointX = e.offsetX == undefined ? e.layerX : e.offsetX;

pointY = e.offsetY == undefined ? e.layerY : e.offsetY;

var piX, piY;

/*清空画布*/

ctx.clearRect(0, 0, can.width, can.height);

/*鼠标下跟随的圆点*/

makearc(ctx, pointX, pointY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');

if (pointArr.length > 0) {

if ((pointX > pointArr[0].x - 15 && pointX < pointArr[0].x + 15) && (pointY > pointArr[0].y - 15 && pointY < pointArr[0].y + 15)) {

if (pointArr.length > 1) {

piX = pointArr[0].x;

piY = pointArr[0].y;

ctx.clearRect(0, 0, can.width, can.height);

makearc(ctx, piX, piY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');

oIndex = 1;

}

} else {

piX = pointX;

piY = pointY;

oIndex = -1;

}

/*开始绘制*/

ctx.beginPath();

ctx.moveTo(pointArr[0].x, pointArr[0].y);

if (pointArr.length > 1) {

for (var i = 1; i < pointArr.length; i++) {

ctx.lineTo(pointArr[i].x, pointArr[i].y);

}

ctx.lineTo(piX, piY);

ctx.fillStyle = 'rgba(161,195,255,1)';//填充颜色

ctx.fill();//填充

ctx.stroke();//绘制

}

});

// 存储已生成的点线

function canvasSave(pointArr) {

ctxSave.clearRect(0, 0, ctxSave.width, ctxSave.height);

ctxSave.beginPath();

if (pointArr.length > 1) {

ctxSave.moveTo(pointArr[0].x, pointArr[0].y);

for (var i = 1; i < pointArr.length; i++) {

ctxSave.lineTo(pointArr[i].x, pointArr[i].y);

ctxSave.fillStyle = 'rgba(161,195,255,1)';//填充颜色

ctxSave.strokeStyle = "green" //设置border的颜色

ctxSave.fill();

ctxSave.stroke();//绘制

}

ctxSave.closePath();

}

/*生成画布结束绘画*/

function saveCanvas() {

ctx.clearRect(0, 0, can.width, can.height);

ctxSave.closePath();//结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来

// ctxSave.fill();//填充

ctxSave.stroke();//绘制

pointArr = [];

}

/*清空选区*/

$('#deleteCanvas').click(function () {

ctx.clearRect(0, 0, can.width, can.height);

ctxSave.clearRect(0, 0, canSave.width, canSave.height);

pointArr = [];

// allPoint = [];

});

/*验证canvas画布是否为空函数*/

function isCanvasBlank(canvas) {

var blank = document.createElement('canvas');//创建一个空canvas对象

blank.width = canvas.width;

blank.height = canvas.height;

return canvas.toDataURL() == blank.toDataURL();//为空返回true

}

/*canvas生成圆点*/

function GetRandomNum(Min, Max) {

var Range = Max - Min;

var Rand = Math.random();

return (Min + Math.round(Rand * Range));

}

function makearc(ctx, x, y, r, s, e, color) {

ctx.clearRect(0, 0, 199, 202);//清空画布

ctx.beginPath();

ctx.fillStyle = color;

ctx.arc(x, y, r, s, e);

ctx.fill();

}

function Area(p0, p1, p2) {

let area = 0.0;

area =

p0.x * p1.y +

p1.x * p2.y +

p2.x * p0.y -

p1.x * p0.y -

p2.x * p1.y -

p0.x * p2.y;

return area / 2;

}

// 计算多边形质心

function getPolygonAreaCenter(points) {

let sum_x = 0;

let sum_y = 0;

let sum_area = 0;

let p1 = points[1];

for (var i = 2; i < points.length; i++) {

let p2 = points[i];

let area = Area(points[0], p1, p2);

sum_area += area;

sum_x += (points[0].x + p1.x + p2.x) * area;

sum_y += (points[0].y + p1.y + p2.y) * area;

p1 = p2;

}

return {

x: sum_x / sum_area / 3,

y: sum_y / sum_area / 3

};

}

</script>

</body>

</html>

使用canvas画多个多边形，并在质心填充文字

猜你喜欢