<!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>
![]()
