写在前面
用javascript结合html中的canvas标签来实现画布的随意涂鸦，以及将涂鸦的作品保存下来。
电脑端实现
http://jsrun.net/dfwKp/embedded/all/light
index.html
<!DOCTYPE html>
<head>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container text-center mt-5 pt-5">
<div>
<input type="range" min="0" max="20" step="1" class="custom-range" id="customRange1" style="width: 200px">
</div>
<div class="my-3">
<canvas id="canvas" class="img-thumbnail"></canvas>
</div>
<div>
<button class="btn btn-success" id="downl">下载</button>
<button class="btn btn-warning" id="clean">清空</button>
</div>
</div>
<!--Myjs-->
<script src="index.js"></script>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
index.js
var canvas = document.getElementById('canvas')
// 画板大小
canvas.width = 280
canvas.height = 280
var context = canvas.getContext('2d')
// 背景颜色
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)
// 线宽提示
var range = document.getElementById('customRange1')
range.oninput = function () {
this.title = 'lineWidth: ' + this.value
}
var Mouse = { x: 0, y: 0 }
var lastMouse = { x: 0, y: 0 }
var painting = false
canvas.onmousedown = function () {
painting = !painting
}
canvas.onmousemove = function (e) {
lastMouse.x = Mouse.x
lastMouse.y = Mouse.y
Mouse.x = e.pageX - this.offsetLeft
Mouse.y = e.pageY - this.offsetTop
if (painting) {
/*
画笔参数：
line 线宽
lineJoin: 线条转角的样式, 'round': 转角是圆头
lineCap: 线条端点的样式, 'round': 线的端点多出一个圆弧
strokeStyle: 描边的样式, 'white': 设置描边为白色
*/
context.lineWidth = range.value
context.lineJoin = 'round'
context.lineCap = 'round'
context.strokeStyle = 'white'
// 开始绘画
context.beginPath()
context.moveTo(lastMouse.x, lastMouse.y);
context.lineTo(Mouse.x, Mouse.y);
context.closePath()
context.stroke()
}
}
canvas.onmouseup = function () {
painting = !painting
}
// 下载图片
var downl = document.getElementById('downl')
downl.onclick = function () {
var canvas = document.getElementById('canvas')
var a = document.createElement('a')
a.download = 'canvas'
a.href = canvas.toDataURL('image/jpeg')
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
// 清空画布
var clean = document.getElementById('clean')
clean.onclick = function () {
context.clearRect(0, 0, canvas.width, canvas.height)
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)
}
移动端实现
http://jsrun.net/R3wKp/embedded/all/light
index.html
<!DOCTYPE html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center mt-5 pt-5">
<div>
<input type="range" min="0" max="20" step="1" class="custom-range" id="customRange1" style="width: 200px">
</div>
<div class="my-3">
<canvas id="canvas" class="img-thumbnail"></canvas>
</div>
<div>
<button class="btn btn-success" id="downl">下载</button>
<button class="btn btn-warning" id="clean">清空</button>
</div>
</div>
<!--My JS-->
<script src="index.js"></script>
<!--Bootstrap JS-->
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
index.js
// 获取元素
var canvas = document.getElementById('canvas')
// 画板大小
canvas.width = 280
canvas.height = 280
// 平面绘图
var context = canvas.getContext('2d')
// 背景颜色
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)
// 线宽提示
var range = document.getElementById('customRange1')
range.oninput = function () {
this.title = 'lineWidth: ' + this.value
}
// 定义坐标
var start_x, start_y, move_x, move_y, end_x, end_y
// 按下手指
canvas.ontouchstart = function (e) {
start_x = e.touches[0].pageX - this.offsetLeft
start_y = e.touches[0].pageY - this.offsetTop
context.lineWidth = range.value
context.lineJoin = 'round'
context.lineCap = 'round'
context.strokeStyle = 'white'
context.beginPath()
context.moveTo(start_x, start_y)
}
// 移动手指
canvas.ontouchmove = function (e) {
move_x = e.touches[0].pageX - this.offsetLeft
move_y = e.touches[0].pageY - this.offsetTop
context.lineTo(move_x, move_y)
context.stroke()
}
// 松开手指
canvas.ontouchend = function (e) {
end_x = e.changedTouches[0].pageX - this.offsetLeft
end_y = e.changedTouches[0].pageY - this.offsetTop
context.closePath();
}
// 下载图片
var downl = document.getElementById('downl')
downl.onclick = function () {
var canvas = document.getElementById('canvas')
var a = document.createElement('a')
a.download = 'canvas'
a.href = canvas.toDataURL('image/jpeg')
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
// 清空画布
var clean = document.getElementById('clean')
clean.onclick = function () {
context.clearRect(0, 0, canvas.width, canvas.height)
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)
}
引用参考
https://www.canvasapi.cn/
https://www.jianshu.com/p/e6d8351b6483
https://www.cnblogs.com/Tohold/p/10452869.html
https://getbootstrap.net/docs/components/forms/#range
https://blog.csdn.net/wogieni/article/details/97416465