Skip to content

Commit 29abdb5

Browse files
wangjiajian123wangjiajian123
committed
在线画图
0 parents  commit 29abdb5

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎在线画图工具.html

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<style>
10+
* {
11+
padding: 0;
12+
margin: 0;
13+
}
14+
15+
canvas {
16+
border: 1px solid #000;
17+
position: absolute;
18+
top: 0px;
19+
left: 50%;
20+
transform: translateX(-50%);
21+
}
22+
23+
.tools_bar {
24+
/* height: 400px; */
25+
border: 1px solid #000;
26+
float: left;
27+
text-align: left;
28+
line-height: 40px;
29+
}
30+
31+
.rubber_view {
32+
width: 600px;
33+
height: 600px;
34+
position: absolute;
35+
top: 0px;
36+
left: 50%;
37+
transform: translateX(-50%);
38+
overflow: hidden;
39+
}
40+
41+
.rubber_pic {
42+
background: #fff;
43+
width: 20px;
44+
height: 20px;
45+
position: absolute;
46+
z-index: 2;
47+
display: none;
48+
}
49+
</style>
50+
</head>
51+
52+
<body>
53+
<div class="tools_bar">
54+
背景色： <input type="color" class="bg_color" value="#ffffff"><br> 主题色: <input type="color" class="color"><br> 线条粗细:
55+
<select class="border_width">
56+
<option value="1">1px</option>
57+
<option value="5">5px</option>
58+
<option value="10">10px</option>
59+
<option value="15">15px</option>
60+
</select><br> 功能：
61+
<button class="pen">画笔</button>
62+
<button class="square">矩形框</button>
63+
<button class="rubber">橡皮擦</button>
64+
<button class="clear_all">清空画布</button>
65+
</div>
66+
<!-- <div class="rubber_view">
67+
<div class="rubber_pic">
68+
69+
</div>
70+
</div> -->
71+
<div class="rubber_pic">
72+
73+
</div>
74+
<canvas width="600" height="600"></canvas>
75+
</body>
76+
<script>
77+
var cas = document.querySelector("canvas");
78+
var ctx = cas.getContext("2d");
79+
var bg_color = document.querySelector(".bg_color")
80+
var color = document.querySelector(".color");
81+
var border_width = document.querySelector(".border_width");
82+
var tools = document.querySelectorAll("button");
83+
var rubber_view = document.querySelector(".rubber_view");
84+
var rubber_pic = document.querySelector(".rubber_pic");
85+
var start_pos_x = 0;
86+
var start_pos_y = 0;
87+
//设置一个开关
88+
var flag = false;
89+
//配置全局对象
90+
var global_obj = {
91+
border_width: 1,
92+
color: "#000",
93+
tools: "pen",
94+
};
95+
// console.log(tools);
96+
//给每个功能注册事件，选择功能
97+
for (var i = 0; i < tools.length; i++) {
98+
tools[i].onclick = function() {
99+
//每次点击完一个功能都用before_tool 存储起来
100+
var before_tool = global_obj.tools;
101+
global_obj.tools = this.className;
102+
// console.log(this.className);
103+
//如果选择清空画布，则直接清空整个画布
104+
if (global_obj.tools == "clear_all") {
105+
ctx.clearRect(0, 0, cas.width, cas.height);
106+
//清空完后，让功能变回清空前的功能
107+
global_obj.tools = before_tool;
108+
ctx.fillStyle = bg_color.value;
109+
ctx.fillRect(0, 0, cas.width, cas.height);
110+
}
111+
}
112+
}
113+
//设置背景颜色
114+
bg_color.addEventListener("change", function() {
115+
ctx.fillStyle = bg_color.value;
116+
ctx.fillRect(0, 0, cas.width, cas.height);
117+
});
118+
//设置主题色
119+
color.addEventListener("change", function() {
120+
global_obj.color = color.value;
121+
// console.log(global_obj.color);
122+
});
123+
//设置粗细
124+
border_width.addEventListener("change", function() {
125+
global_obj.border_width = border_width.value;
126+
// console.log(global_obj.border_width);
127+
});
128+
129+
//把配置对象的属性赋值到画布中
130+
cas.addEventListener("mousedown", function(e) {
131+
flag = true;
132+
ctx.beginPath();
133+
ctx.strokeStyle = global_obj.color;
134+
// console.log(ctx.strokeStyle);
135+
ctx.lineWidth = global_obj.border_width;
136+
//使用边框需要用到起始坐标
137+
start_pos_x = e.offsetX;
138+
start_pos_y = e.offsetY;
139+
140+
if (global_obj.tools == "rubber") {
141+
ctx.clearRect(e.offsetX, e.offsetY, 20, 20);
142+
}
143+
144+
});
145+
cas.addEventListener("mousemove", function(e) {
146+
// if (global_obj.tools == "rubber") {
147+
// rubber_pic.style.display = "block";
148+
// rubber_pic.style.left = e.pageX + "px";
149+
// rubber_pic.style.top = e.pageY + "px";
150+
// // console.log(rubber_pic.style.left);
151+
// }
152+
if (!flag) {
153+
return;
154+
}
155+
var m_x = e.offsetX;
156+
var m_y = e.offsetY;
157+
if (global_obj.tools == "pen") { //当是笔的功能时
158+
ctx.lineTo(m_x, m_y);
159+
ctx.stroke();
160+
} else if (global_obj.tools == "rubber") {
161+
// rubber_pic.style.display = "none";
162+
ctx.clearRect(m_x, m_y, 20, 20);
163+
}
164+
});
165+
cas.addEventListener("mouseup", function(e) {
166+
if (global_obj.tools == "square") {
167+
var m_x = e.offsetX;
168+
var m_y = e.offsetY;
169+
var square_w = m_x - start_pos_x;
170+
var square_h = m_y - start_pos_y;
171+
ctx.strokeRect(start_pos_x, start_pos_y, square_w, square_h);
172+
}
173+
flag = false;
174+
});
175+
</script>
176+
177+
</html>

0 commit comments

Comments
 (0)