帮我生成一个canvas图片标注的代码 要求可以存储点的集合
时间: 2023-04-02 16:04:07 浏览: 51
好的,以下是生成一个canvas图片标注的代码,可以存储点的集合:
```
<!DOCTYPE html>
<html>
<head>
<title>Canvas图片标注</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<button onclick="savePoints()">保存标注点</button>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [];
canvas.addEventListener("click", function(event) {
var x = event.offsetX;
var y = event.offsetY;
points.push({x: x, y: y});
drawPoint(x, y);
});
function drawPoint(x, y) {
ctx.beginPath();
ctx.arc(x, y, 5, , 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
}
function savePoints() {
console.log(points);
// 这里可以将points存储到数据库或者本地存储中
}
</script>
</body>
</html>
```
希望能对您有所帮助。