样式
如图所示：可以画圆、矩形，正方型、改变线条、颜色等，还可以下载下来，只不过画好的形状还不能随意改变形状。有小伙伴想深入探索的滴滴o
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画板</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
#caidan {
width: 40vw;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #333;
}
.btn {
flex: 1;
height: 40px;
border: none;
margin-right: 20px;
}
.btn.active {
background-color: aqua;
box-shadow: 5px 5px 5px #333;
}
.line {
display: flex;
margin-right: 20px;
}
#canvas {
width: 100vw;
height: 100vh;
}
</style>
<body>
<div id="caidan" class="huabi">
<button class="btn" value="huabi">画笔</button>
<button class="btn" value="rect" id="rect">矩形</button>
<button class="btn" value="arc">画圆</button>
<div class="line">
<div>线条</div>
<select onchange="handleLine(event)" name="2">
<option value=" 2">2像素</option>
<option value="5">5像素</option>
<option value="8">8像素</option>
</select>
</div>
<div class="line lineColor">颜色
<input onchange="handleColor(event)" type="color" value="#000" />
</div>
<button id="download" value="downImg">下载图片</button>
<a id="aaa" download="downImg" style="display: none;">预览</a>
</div>
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas")
let allBtn = document.querySelectorAll(".btn")
// 设置画板的区域
canvas.setAttribute("width", canvas.offsetWidth)
canvas.setAttribute("height", canvas.offsetHeight)
let ctx = canvas.getContext("2d")
//给选中的按钮添加样式
let huaban = {
type: null,
isDraw: false,
// 线条粗细
lineStyle: 1,
// 线条颜色
lineColor: "#000",
// 定义起始点
beginX: 0,
beginY: 0,
// 保存之前化的图
imageData: null,
// 画笔函数
huabiFn: function (e) {
let x = e.pageX - canvas.offsetLeft
let y = e.pageY - canvas.offsetTop
ctx.lineTo(x, y)
ctx.lineWidth = huaban.lineStyle
ctx.strokeStyle = huaban.lineColor
ctx.stroke()
},
// 画矩形
rectOrarcFn: function (e) {
let x = e.pageX - canvas.offsetLeft
let y = e.pageY - canvas.offsetTop
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight)
if (huaban.imageData != null) {
ctx.putImageData(huaban.imageData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight)
}
ctx.beginPath()
ctx.lineWidth = huaban.lineStyle
ctx.strokeStyle = huaban.lineColor
if (huaban.type == 'arc') {
ctx.arc(huaban.beginX, huaban.beginY, x - huaban.beginX, 0, Math.PI * 2)
} else {
ctx.rect(huaban.beginX, huaban.beginY, x - huaban.beginX, y - huaban.beginY)
}
// ctx.fill()
ctx.stroke();
ctx.closePath()
}
}
let huabiBtn = document.querySelector(".huabi")
huabiBtn.addEventListener("click", (e) => {
allBtn.forEach(element => {
element.classList.remove("active")
});
e.target.classList.add("active")
huaban["type"] = e.target.value
if (e.target.value == "downImg") {
// 下载图片
e.target.onclick = function () {
let url = canvas.toDataURL()
console.log(url)
let createEle = document.getElementById("aaa")
createEle.setAttribute("href", url)
createEle.click()
}
}
}, false)
// 修改线条粗细
handleLine = function (e) {
huaban["lineStyle"] = e.target.value
}
// 修改颜色
handleColor = function (e) {
huaban["lineColor"] = e.target.value
}
// 监听鼠标按下时开启画笔
canvas.onmousedown = function (e) {
if (huaban.type != null) {
huaban.isDraw = true
huaban["beginX"] = e.pageX - canvas.offsetLeft
huaban["beginY"] = e.pageY - canvas.offsetTop
if (huaban.type == "huabi") {
ctx.beginPath()
ctx.moveTo(huaban["beginX"], huaban["beginY"])
}
}
}
// 监听鼠标抬起时关闭画笔
canvas.onmouseup = function () {
huaban["imageData"] = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight)
huaban.isDraw = false
if (!huaban.isDraw) {
ctx.closePath()
}
}
// 鼠标移动时
canvas.onmousemove = function (e) {
if (huaban.isDraw) {
if (huaban.type == "huabi") {
huaban["huabiFn"](e)
} else {
huaban["rectOrarcFn"](e)
}
}
}
</script>
</body>
</html>
前端真难！！！！！！！！！！！！！！！！！
