画板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
.main {
width: 800px;
height: 600px;
margin: auto;
border: 1px solid red;
}
canvas {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<div>
<label>颜色</label>
<input type="color" onchange="changeColor(event)" />
</div>
<div>
<label>线宽</label>
<select onchange="changeWidth(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="btns">
<button data-index="0">画画</button>
<button data-index="1">橡皮擦</button>
<button data-index="2">重置画板</button>
<button data-index="3">保存图片</button>
</div>
</div>
<canvas width="800" height="400"></canvas>
</div>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let btns = document.querySelectorAll("button");
btns.forEach(function (btn, i) {
btn.isSelect = false;
btn.onclick = function () {
this.isSelect = true;
this.style.backgroundColor = "red";
this.style.color = "white";
$(this).siblings().css({
backgroundColor: "lightblue",
color: "black",
});
$(this).siblings().attr("isSelect", false);
let idx = $(btn).attr("data-index");
if (idx == 0) {
isDrawing = true;
isCa = false;
} else if (idx == 1) {
isCa = true;
isDrawing = false;
} else if (idx == 2) {
ctx.clearRect(0, 0, 800, 400);
document.querySelector("input").value = "black";
document.querySelector("select").value = 1;
} else if (idx == 3) {
let url = canvas.toDataURL();
window.open(url);
}
};
});
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.lineCap = "round";
let isDown = false; // 是否按下
let isDrawing = false; // 画
let isCa = false; // 擦
canvas.onmousedown = function (e) {
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.lineCap = "round";
isDown = true;
// 鼠标按下时的点坐标，就是画笔的起点，需要获取鼠标点相对于画布的坐标点
let x = e.pageX - this.offsetLeft;
let y = e.pageY - this.offsetTop;
ctx.beginPath();
ctx.moveTo(x, y);
};
canvas.onmousemove = function (e) {
if (isDrawing && isDown) {
// 获取实时 鼠标相对于画布的坐标点
let x = e.pageX - this.offsetLeft;
let y = e.pageY - this.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
if (isCa && isDown) {
// 获取鼠标相对于canvas的坐标点
let x = e.pageX - this.offsetLeft;
let y = e.pageY - this.offsetTop;
ctx.clearRect(x - 15, y - 15, 30, 30);
}
};
canvas.onmouseup = function () {
let select1 = $("button").eq(0)[0].isSelect;
if (!select1) {
isDrawing = false;
}
let select2 = $("button").eq(1)[0].isSelect;
if (!select2) {
isCa = false;
}
isDown = false;
};
// 画
function setContent(e) {}
// 橡皮擦
function clearContent(e) {
isCa = true;
isDrawing = false;
}
// 修改颜色
function changeColor(e) {
ctx.strokeStyle = e.target.value;
}
// 修改线宽
function changeWidth(e) {
ctx.lineWidth = e.target.value;
}
// 重置
function resetContent() {
ctx.clearRect(0, 0, 800, 400);
document.querySelector("input").value = "black";
document.querySelector("select").value = 1;
}
resetContent();
// 保存图片
// function saveContent() {
// // toDataURL 将canvas标签上的内容转化为图片 (base64编码后的图片)
// let url = canvas.toDataURL();
// window.open(url);
// }
</script>
</body>
</html>
浙公网安备 33010602011771号