标签：function canvas 写字板 canvasHeight jq canvasWidth context var
如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。
如果有什么错误，请一定指出，以免误导大家、也误导我。
线上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>
结果：
标签：function,canvas,写字板,canvasHeight,jq,canvasWidth,context,var 来源： https://www.cnblogs.com/linfblog/p/12147341.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。