画板 Drawing App
1. 概述
项目展示了一个简单的画板.
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<canvas id="canvas" width="800" height="700"></canvas>
<div class="toolbox">
<button id="decrease">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
<span id="size">5</span>
<button id="increase">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<input type="color" id="color">
<button id="clear">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</body>
页面分为两个部分, 一个承载绘画内容的 canvas 和下方承载按钮的 div 容器.
3. 编写 CSS 样式
首先定义 canvas 和 body 的样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
canvas {
border: 2px solid steelblue;
}
随后定义按键容器和按键的样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.toolbox {
background-color: steelblue;
border: 1px solid slateblue;
display: flex;
width: 804px;
padding: 1rem;
}
.toolbox > * {
background-color: #fff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
height: 50px;
width: 50px;
margin: 0.25rem;
padding: 0.25rem;
cursor: pointer;
}
.toolbox > *:last-child {
margin-left: auto;
}
完整的 CSS 样式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
canvas {
border: 2px solid steelblue;
}
.toolbox {
background-color: steelblue;
border: 1px solid slateblue;
display: flex;
width: 804px;
padding: 1rem;
}
.toolbox > * {
background-color: #fff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
height: 50px;
width: 50px;
margin: 0.25rem;
padding: 0.25rem;
cursor: pointer;
}
.toolbox > *:last-child {
margin-left: auto;
}
4. JavaScript
最后, 我们编写 JavaScript 函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const canvas = document.getElementById('canvas');
const increaseBtn = document.getElementById('increase');
const decreaseBtn = document.getElementById('decrease');
const sizeEL = document.getElementById('size');
const colorEl = document.getElementById('color');
const clearEl = document.getElementById('clear');
// get the context of the canvas
const ctx = canvas.getContext('2d');
// initialize the color and the size of the pen
let size = 10;
let isPressed = false;
colorEl.value = 'black';
let color = colorEl.value;
let x, y;
// case: pen pressed
canvas.addEventListener('mousedown', (e) => {
isPressed = true;
x = e.offsetX;
y = e.offsetY;
})
// case: pen up
document.addEventListener('mouseup', (e) => {
isPressed = false;
x = undefined;
y = undefined;
})
// case: moving
canvas.addEventListener('mousemove', (e) => {
if (isPressed) {
const x2 = e.offsetX;
const y2 = e.offsetY;
// draw the point, and connect the line
drawCircle(x2, y2);
drawLine(x, y, x2, y2);
x = x2;
y = y2;
}
})
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.lineWidth = size * 2;
ctx.stroke()
}
function updateSizeOnScreen() {
sizeEL.innerText = size;
}
increaseBtn.addEventListener('click', () => {
// increase the stroke size...
size += 2;
if (size > 50) {
size = 50;
}
updateSizeOnScreen();
})
decreaseBtn.addEventListener('click', () => {
size -= 2;
if (size < 5) {
size = 5;
}
updateSizeOnScreen();
})
colorEl.addEventListener('change', (e) => color = e.target.value);
clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height));
最后, 完整的网页演示可见 此处
