<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PC端和移动端canvas签名画板</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#myCanvas {
border: 1px solid #333;
display: block;
margin: 0 auto;
}
#operation {
width: 300px;
margin: 10px auto;
}
#position {
width: 100%;
text-align: center;
height: 30px;
}
#canvasImg {
display: block;
margin: 0 auto;
border: 1px dotted #333;
}
</style>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<div id="operation">
<p id="position"> </p>
<button id="clearCanvas">清空</button>
<button id="success">生成图片</button>
<!-- <a href="" download="test.jpg" id="download">下载</a> -->
<button onclick="download()">下载</button>
</div>
<img id="canvasImg" src="" alt="生成的图片" width="300" height="200">
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
if(document.getElementById("canvasImg").getAttribute("src")==''){
document.getElementById("canvasImg").style.display = "none"
}else{
document.getElementById("canvasImg").style.display = "block"
}
// 我们需要的值 = 触摸点获取到的x - canvas相对body的左边距
var start_x, start_y, move_x, move_y, end_x, end_y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var t = document.getElementById('myCanvas').offsetTop;//canvas上边距
var l = document.getElementById('myCanvas').offsetLeft;//canvas做边距
// h5
document.getElementById("myCanvas").addEventListener("touchstart", function (e) {
start_x = e.touches[0].pageX - l;
start_y = e.touches[0].pageY - t;
//开始本次绘画
ctx.beginPath();
//画笔起始点
ctx.moveTo(start_x, start_y);
//显示座标
document.getElementById('position').innerText = (`${start_x},${start_y}`);
});
// 移动过程中根据鼠标路径绘画并渲染出来
document.getElementById("myCanvas").addEventListener("touchmove", function (e) {
move_x = e.touches[0].pageX - l;
move_y = e.touches[0].pageY - t;
//根据鼠标路径绘画
ctx.lineTo(move_x, move_y);
//立即渲染
ctx.stroke();
//显示座标
document.getElementById('position').innerText = (`${move_x},${move_y}`);
});
// 松开时,创建从当前点到开始点的路径
document.getElementById("myCanvas").addEventListener("touchend", function (e) {
end_x = e.changedTouches[0].pageX - l;
end_y = e.changedTouches[0].pageY - t;
//创建从当前点到开始点的路径
ctx.closePath();
//显示座标
document.getElementById('position').innerText = (`${end_x},${end_y}`);
});
// pc
//按下（PC端）
$("#myCanvas").bind("mousedown", function (e) {
start_x = e.pageX - l;
start_y = e.pageY - t;
//开始本次绘画
ctx.beginPath();
//画笔起始点
ctx.moveTo(start_x, start_y);
//显示座标
document.getElementById('position').innerText = (`${start_x},${start_y}`);
//移动（pc）
$("#myCanvas").bind("mousemove", function (e) {
console.log(222)
move_x = e.pageX - l;
move_y = e.pageY - t;
//根据鼠标路径绘画
ctx.lineTo(move_x, move_y);
//立即渲染
ctx.stroke();
//显示座标
document.getElementById('position').innerText = (`${move_x},${move_y}`);
})
});
//松开
document.getElementById("myCanvas").addEventListener("mouseup", function (e) {
$('#myCanvas').unbind('mousemove');
// end_x=e.pageX-l;
// end_y=e.pageY-t;
// //创建从当前点到开始点的路径
// ctx.closePath();
// //显示座标
// document.getElementById('position').innerText=(`${end_x},${end_y}`);
});
// 清空当前画布
// 清空当前画布clearRect(0,0,0,0)
// 前两个值代表起始点x,y
// 后两个代表终止点x,y
document.getElementById('clearCanvas').onclick = function () {
// 清空画布
ctx.clearRect(0, 0, 300, 200);
}
// 生成图片canvas.toDataURL("image/png")
document.getElementById('success').onclick = function () {
document.getElementById("canvasImg").style.display = "block"
// canvas生成图片base64编码
console.log(canvas.toDataURL("image/png"))
//将生成的图片赋给img元素
document.getElementById('canvasImg').src = canvas.toDataURL("image/png")
}
//下载文件
function saveFile(data, filename){
// var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
var save_link= document.createElement('a');
console.log(save_link)
save_link.href = data;
save_link.download = filename;
save_link.click()
// var event = document.createEvent('MouseEvents');
// event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// save_link.dispatchEvent(event);
}
function download(){
var dataURL = canvas.toDataURL("image/png");
saveFile(dataURL,'test.jpg');
}
</script>
</html>
![]()
