原生画框的编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#canvas {
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
<script>
(function() {
// 获取canvas左上角坐标
const oCanvas = document.getElementById("canvas"),
oCanvasLeft = oCanvas.offsetLeft,
oCanvasTop = oCanvas.offsetTop;
const ctx = oCanvas.getContext("2d");
let position = {};
// 绑定鼠标按下事件
oCanvas.addEventListener("mousedown", function(e) {
clear();
// 画线
let mouseX1 = e.pageX - oCanvasLeft,
mouseY1 = e.pageY - oCanvasTop;
drawLine(mouseX1, mouseY1);
// 绑定鼠标移动事件，必须写在按下事件里面
this.addEventListener("mousemove", mousemove);
// 鼠标抬起移除鼠标移动事件
this.addEventListener("mouseup", function() {
oCanvas.removeEventListener("mousemove", mousemove);
console.log(position);
oCanvas.removeEventListener('mouseup', arguments.callee)
});
// 绘制线条：这里的x，y就是线的坐标
function drawLine(x, y) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
// 绘制矩形：这里的x, y, w, h就是矩形的坐标和宽高
function drawRect(x, y, w, h) {
ctx.beginPath();
ctx.strokeRect(x, y, w, h);
ctx.closePath();
position = {
x,
y,
w,
h
};
}
// 鼠标移动
function mousemove(ev) {
let mouseX2 = ev.pageX - oCanvasLeft,
mouseY2 = ev.pageY - oCanvasTop;
if (mouseX2 !== mouseX1 || mouseY2 !== mouseY1) {
clear();
drawLine(mouseX1, mouseY1);
drawRect(mouseX1, mouseY1, mouseX2 - mouseX1, mouseY2 - mouseY1);
}
}
// 清除画布
function clear() {
ctx.clearRect(0, 0, oCanvas.width, oCanvas.height);
}
});
})();
</script>
</body>
</html>
加班万岁!
