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;};}//坐标转换，鼠标相对于canvasfunction 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>

结果预览：

H5 jq+canvas实现pc写字板功能相关推荐

html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
php写字板代码,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
Android可滑动画板,Android实现画板、写字板功能（附源码下载）
前言本文给大家分享一个使用Android开发写字板功能Dem.简单操作内存中的图像.对图像进行简单的处理.绘制直线.以达到写字板的效果效果图如下 XML布局代码 xmlns:tools=" ...
php写字板代码,Android实现画板、写字板功能（附源码下载）
前言本文给大家分享一个使用Android开发写字板功能Dem.简单操作内存中的图像.对图像进行简单的处理.绘制直线.以达到写字板的效果效果图如下 XML布局代码 xmlns:tools=" ...
原生js输出html5,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了<JS+HTML5 Canvas实现简单的写字板功能>,这里再介绍另一种实现方法. ...
html 写字版插件,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了& ...
在钉钉上怎么手写_钉钉直播上课可以写字吗_钉钉直播写字板功能介绍_玩游戏网...
钉钉直播上课已经有很多学校在使用了,这个时候就有人问了,能不能在钉钉上用手写字,在学习资料上做笔记,目前发下来钉钉的很多功能,不过关于写字这个功能暂且还没有,那么想要用写字的方式教学要怎么做呢?这就让 ...
java 写字板_用Java实现写字板功能！
原标题:用Java实现写字板功能! import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; impo ...

H5 jq+canvas实现pc写字板功能

H5 jq+canvas实现pc写字板功能相关推荐

最新文章

热门文章