湛江手机网站建设公司,石基网站建设,网站托管服务内容,自己学习做网站6需要的前置知识#xff1a;简单的canvas绘制线路过程
let canvas document.getElementById(id);
//id为canvas标签元素的id#xff0c;或通过其它方法获取标签
let ctx canvas.getContext(2d);
//规定为2d绘制图片#xff0c;即确定为2d画笔
ctx.strokeStyle whit…需要的前置知识简单的canvas绘制线路过程
let canvas document.getElementById(id);
//id为canvas标签元素的id或通过其它方法获取标签
let ctx canvas.getContext(2d);
//规定为2d绘制图片即确定为2d画笔
ctx.strokeStyle white
//画笔的颜色为白色
ctx.beginPath();
//开始绘制
ctx.moveTo(lastX, lastY); //画笔落笔的点数即开始绘制的位置
ctx.lineTo(lineX, lineY); //画笔结束的位置即结束绘制的位置
ctx.stroke(); //位置填充完毕绘制线路即将两个点连在一起
了解以上的内容便可以进行电子签名了。
原理监听鼠标的点击、按下、松开、以及移动事件根据这些事件绘制路线形成签名最后将canvas转为图片然后发给后端就行啦
实现 !DOCTYPE html
html langen
headmeta charsetUTF-8stylecanvas {border: 1px solid #ccc;}img {width: 100px;height: 100px;}/style
/headbodycanvas idsignature width400 height200 /canvasbutton onclickfn()转换图片/buttona href# iddownload download下载图片/a!-- 如果不给a标签加#会导致页面重新刷新当然你可以去写js代码阻止这个默认行为 --
/body
script
//初始化画布以及画笔var canvas document.getElementById(signature);var ctx canvas.getContext(2d);var flg false;var lastX 0;var lastY 0;canvas.addEventListener(mousedown, function (e) {flg true;//鼠标按下flg为true表示可以进行绘制[lastX, lastY] [e.offsetX, e.offsetY];//es6新增交换两个变量的值console.log(lastX, lastY);});canvas.addEventListener(mousemove, function (e) {if (isDrawing) {ctx.strokeStyle black、ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] [e.offsetX, e.offsetY];}});canvas.addEventListener(mouseup, function (e) {flg false;});const fn () {var dataURL canvas.toDataURL(image/png);var downloadBtn document.getElementById(download);downloadBtn.href dataURL;imgurl.src dataURLconsole.log(成功);}
/script/html
