HTML代码
<h3>简易画图工具</h3>
<canvas width="600" height="400"></canvas>
<div>
<input type="button" value="清除画布">
<span class="red"></span>
<span class="blue"></span>
<span class="black"></span>
<span class="green"></span>
<span class="yellow"></span>
<span class="withe"></span>
<input type="range" min="1" max="10" id="lineWidth" value="1">
粗细度:<p id="num">1</p>
<input type="button" value="橡皮擦">
</div>
CSS代码
h3 {
width: 600px;
text-align: center;
}
canvas {
outline: 1px solid black;
}
span {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
outline: 1px solid black;
}
span:nth-of-type(1) {
background-color: red;
}
span:nth-of-type(2) {
background-color: blue;
}
span:nth-of-type(3) {
background-color: black;
}
span:nth-of-type(4) {
background-color: green;
}
span:nth-of-type(5) {
background-color: yellow;
}
span:nth-of-type(6) {
background-color: white;
}
#num {
display: inline-block;
width: 30px;
text-align: center;
background-color: transparent;
outline: 1px solid black;
margin: 0;
}
#shadow {
box-shadow: 0 0 10px black;
}
JS代码
let canEle = document.getElementsByTagName("canvas")[0];
let pen = canEle.getContext("2d");
let spanEles = document.getElementsByTagName("span");
let divEle = document.getElementsByTagName("div")[0];
let color;
let cuxi;
//鼠标按下获取起点位置
canEle.addEventListener("mousedown", e => {
let event = e || window.event;
pen.beginPath();
pen.moveTo(event.offsetX, event.offsetY);
canEle.addEventListener("mousemove", move)
})
//画图
function move(e) {
let event = e || window.event;
pen.lineTo(event.offsetX, event.offsetY);
cuxi;
color;
pen.stroke();
}
//鼠标抬起停止
canEle.addEventListener("mouseup", e => {
canEle.removeEventListener("mousemove", move);
})
//选择颜色
divEle.addEventListener("click", e => {
let event = e || window.event;
//清除画布
if (event.target.value == "清除画布") {
pen.clearRect(0, 0, 600, 400);
}
//改变颜色
if (event.target.className == "red") {
color = pen.strokeStyle = "red";
addShadow();
event.target.id = "shadow";
};
if (event.target.className == "blue") {
color = pen.strokeStyle = "blue";
addShadow();
event.target.id = "shadow";
};
if (event.target.className == "black") {
color = pen.strokeStyle = "black";
addShadow();
event.target.id = "shadow";
};
if (event.target.className == "green") {
color = pen.strokeStyle = "green";
addShadow();
event.target.id = "shadow";
};
if (event.target.className == "yellow") {
color = pen.strokeStyle = "yellow";
addShadow();
event.target.id = "shadow";
};
if (event.target.className == "withe") {
color = pen.strokeStyle = "transparent ";
addShadow();
event.target.id = "shadow";
};
//橡皮擦
if (event.target.value == "橡皮擦") {
console.log(1);
pen.beginPath();
pen.moveTo(event.offsetX, event.offsetY);
pen.lineTo(event.offsetX, event.offsetY);
pen.lineWidth = 20;
pen.strokeStyle = "#fff";
pen.stroke();
}
})
//改变线条粗细
lineWidth.addEventListener("change", e => {
cuxi = pen.lineWidth = lineWidth.value;
num.innerHTML = `${lineWidth.value}`;
})
//加阴影
function addShadow() {
[...spanEles].map(item => {
item.id = "";
})
}
网页效果图如下,点击颜色可以选取画笔的颜色,可以选择画笔的粗细等