H5 jq+canvas实现pc写字板功能
如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。
如果有什么错误，请一定指出，以免误导大家、也误导我。
线上demo1：点击查看
线上demo2：点击查看
实现此功能需掌握一些基本的canvas语法。
demo1代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1 pc画板测试</title>
</head>
<body>
<canvas id="can" width="800" height="600" style="border:1px solid black;background: white;">Canvas画板</canvas>
<form action="../file/canvas_img_upload_flow.php" method="post">
<input type="hidden" value="" name="data">
<button>提交</button>
</form>
<script src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script>
var canvas = $('#can'), //获取canvas元素
pan = canvas[0].getContext("2d"), //获取2D图像API接口
paint = false, //鼠标左键是否在画板区域按下
x,
y;
pan.strokeStyle = "#000000"; //设置画笔颜色
pan.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
pan.lineWidth = 9; //设置画笔粗细
//监控画板上的鼠标左键按下
canvas.mousedown(function (e) {
paint = true;
x = e.offsetX;
y = e.offsetY;
pan.beginPath();
pan.moveTo(x, y);
});
//移动鼠标
canvas.mousemove(function (e) {
if (paint) {
var nx = e.offsetX,
ny = e.offsetY;
pan.lineTo(x, y);
pan.stroke();
x = nx;
y = ny;
}
});
//释放鼠标左键
canvas.mouseup(function (e) {
paint = false;
});
//鼠标离开画板
canvas.mouseleave(function (e) {
paint = false;
});
//提交数据处理
$('form').submit(function () {
var data = canvas[0].toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
$('input').val(data);
return
});
</script>
</body>
</html>
结果预览：
demo2米字格代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo02 pc端米字格画布</title> <script src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script> <style> #controller .op_btn{ display: inline-block; padding: 5px;color: white;background: orange;cursor: pointer;} </style> </head> <body> <img src="" alt=""> <canvas id="canvas">您的浏览器不支持canvas</canvas> <form id="form" action="../file/canvas_img_upload_flow.php" method="post"> <input type="hidden" value="" name="data"> <!-- <button>提交</button> --> </form> <div id="controller"> <div class="op_btn" id="clear_btn"> 清除</div> <div class="op_btn" id="sub_btn"> 提交</div> </div> <script> var canvasWidth = 800; //画板宽 var canvasHeight = canvasWidth; //画板高 var isMouseDown = false; //鼠标点击状态控制 var lastLoc; var curTimestamp; var lastTimestamp = 0; var lineWidth; var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width = canvasWidth; canvas.height = canvasHeight; drawGrid(); //米字格 //清空 $('#clear_btn').click(function () { context.clearRect(0, 0, canvasWidth, canvasHeight); drawGrid(); //米字格 }) //提交 $('#sub_btn').click(function(){ var data = canvas.toDataURL( 'image/png'); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码 console.log(data) $('input').val(data); $('#form').submit() }) //鼠标按下 canvas.onmousedown = function (e) { e.preventDefault(); isMouseDown = true; // console.log("mouse down!"); lastLoc = windowToCanvas(e.clientX, e.clientY); lastTimestamp = new Date().getTime(); // alert(loc.x+","+loc.y); } //鼠标抬起 canvas.onmouseup = function (e) { e.preventDefault(); isMouseDown = false; // console.log("mouse up~~~"); } //鼠标移出 canvas.onmouseout = function (e) { e.preventDefault(); isMouseDown = false; // console.log("mouse out~~"); } //鼠标移动 canvas.onmousemove = function (e) { e.preventDefault(); if (isMouseDown) { var curLoc = windowToCanvas(e.clientX, e.clientY); var t = curTimestamp - lastTimestamp; context.beginPath(); context.moveTo(lastLoc.x, lastLoc.y); context.lineTo(curLoc.x, curLoc.y); context.strokeStyle = 'black'; context.lineWidth = 20; context.lineCap = "round" context.lineJoin = "round" context.stroke(); lastLoc = curLoc; curTimestamp = lastTimestamp; lastLineWidth = lineWidth; }; } //坐标转换，鼠标相对于canvas function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect(); return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) }; } //米字格 function drawGrid() { context.save(); context.strokeStyle = "rgb(230,11,9)"; context.beginPath(); context.moveTo(3, 3); context.lineTo(canvasWidth - 3, 3); context.lineTo(canvasWidth - 3, canvasHeight - 3); context.lineTo(3, canvasHeight - 3); context.closePath(); context.lineWidth = 6; context.stroke(); context.beginPath(); context.moveTo(0, 0); context.lineTo(canvasWidth, canvasHeight); context.moveTo(canvasWidth, 0); context.lineTo(0, canvasHeight); context.moveTo(canvasWidth / 2, 0); context.lineTo(canvasWidth / 2, canvasHeight); context.moveTo(0, canvasHeight / 2); context.lineTo(canvasWidth, canvasHeight / 2); context.lineWidth = 1; context.stroke(); context.restore(); } </script> </body> </html>
结果：
