canvas做签名板

阅读：评论：0
canvas做签名板
Canvas 做签名板，JS代码
<!DOCTYPE html>
<!-- saved from url=(0056).html -->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>签名板(支持移动端)</title>
</head>
<style type="text/css">*{margin: 0;padding: 0;}.canvas {/*width: 100%;*/display: block;border: 1px solid red;}#clear,#clear1,#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}.changecolor{margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}
</style>
<body data-ext-version="1.4.2"><canvas id="canvas" class="canvas" width="600" height="600">您的浏览器不支持canvas技术,请升级浏览器!</canvas><div style="text-align: center"><span class="changecolor"  onclick="changeColor('blue')">蓝色</span><span class="changecolor"  onclick="changeColor('green')">绿色</span><span class="changecolor"  onclick="changeColor('red')">红色</span></div><div style="text-align: center"><span class="changecolor" id="canvasUndo">撤销</span><span class="changecolor" id="canvasRedo">反撤销</span></div><div style="text-align: center"><span id="clear">清空</span><span id="save">保存</span></div>
</body><script type="text/javascript">function WriteFont(id, options) {var self = this;let step = -1; 			// 书写次数let canvasHistory = [];this.canvas = ElementById(id);width =  document.body.clientWidth;var obj = {canvas: this.canvas,context: Context("2d"),isWrite: false,	//是否开始lastWriteTime: -1,	lastWriteSpeed: 0,	lastWriteWidth: 0,canvasWidth: width - 2,	//canvas宽高canvasHeight: 600,isShowBorder: true,	//是否显示网格bgColor: '#fff',	//背景色borderWidth: 2,	//	网格线宽度borderColor: "#fff",	//网格颜色	lastPoint: {},	//writeWidth: 2,		//基础轨迹宽度maxWriteWidth: 30,	// 写字模式最大线宽minWriteWidth: 1,	// 写字模式最小线宽writeColor: '#000',	// 轨迹颜色isWriteName: false	// 签名模式}for(var name in options) {obj[name] = options[name];}/*** 轨迹宽度*/this.setLineWidth = function() {var nowTime = new Date().getTime();var diffTime = nowTime - obj.lastWriteTime;obj.lastWriteTime = nowTime;var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;if(returnNum < obj.minWriteWidth) {returnNum = obj.minWriteWidth;} else if(returnNum > obj.maxWriteWidth) {returnNum = obj.maxWriteWidth;}returnNum = Fixed(2);//写字模式和签名模式if(obj.isWriteName){t.lineWidth = obj.writeWidth;}t.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;}}/*** 绘制轨迹*/this.writing = function(point) {t.beginPath();veTo(obj.lastPoint.x, obj.lastPoint.y);t.lineTo(point.x, point.y);self.setLineWidth();t.stroke();obj.lastPoint = t.closePath();}/*** 轨迹样式*/this.writeContextStyle = function() {t.beginPath();t.strokeStyle = obj.t.lineCap = 'round';t.lineJoin = "round";}/*** 写开始*/this.writeBegin = function(point) {obj.isWrite = true;obj.lastWriteTime = new Date().getTime();obj.lastPoint = point;self.writeContextStyle();}/*** 写结束*/this.writeEnd = function(point,type = 0) {//新增记录if (type == 1) {step++;if (step < canvasHistory.length) {canvasHistory.length = step; // 截断数组}canvasHistory.push(DataURL("image/png")); // 添加新的绘制到历史记录console.log(step);}//endobj.isWrite = false;}/*** 清空画板*/this.canvasClear = function() {t.save();t.strokeStyle = '#fff';t.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);if(obj.isShowBorder && !obj.isWriteName) {t.beginPath();var size = obj.borderWidth / 2;//画外面的框veTo(size, size);t.lineTo(obj.canvasWidth - size, size);t.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);t.lineTo(size, obj.canvasHeight - size);t.closePath();t.lineWidth = obj.t.strokeStyle = obj.t.stroke();//画里面的框veTo(0, 0);t.lineTo(obj.canvasWidth, obj.canvasHeight);t.lineTo(obj.canvasWidth, obj.canvasHeight / 2);t.lineTo(obj.canvasWidth, obj.canvasHeight / 2);t.lineTo(0, obj.canvasHeight / 2);t.lineTo(0, obj.canvasHeight);t.lineTo(obj.canvasWidth, 0);t.lineTo(obj.canvasWidth / 2, 0);t.lineTo(obj.canvasWidth / 2, obj.canvasHeight);t.stroke();}store();}/*** 保存图片 格式base64*/this.saveAsImg = function() {var image = new Image();image.src = DataURL("image/png");if(image.src == ptyCanvas) {alert('请先书写')} else {console.log('提交的内容===>', image.src)}};/*** 初始化画板*/this.canvasInit = function() {this.canvas.width = obj.canvasWidth;this.canvas.height = obj.ptyCanvas = DataURL("image/png");}/** 修改笔画颜色 */this.changecolor=function($color){console.log('改变颜色');obj.writeColor =$t.restore();}// 撤销方法this.canvasUndo=function() {console.log(step)if (step >= 0) {t.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);if (step < 0) { return false;}let canvasPic = new Image();canvasPic.src = canvasHistory[step];canvasPic.addEventListener('load', () => {t.drawImage(canvasPic, 0, 0);});} else {console.log('不能再继续撤销了');}}// 反撤销方法this.canvasRedo=function() {if (step < canvasHistory.length - 1) {step++;let canvasPic = new Image();canvasPic.src = canvasHistory[step];canvasPic.addEventListener('load', () => {t.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);t.drawImage(canvasPic, 0, 0);});} else {console.log('已经是最新的记录了');}}this.setWidth=function(){//宽度铺满width = document.body.clientWidth;console.log(width);obj.canvasWidth =t.restore();}/**======================事件绑定===========================**/this.canvas.addEventListener('mousedown', function(e) {var point = {x: e.offsetX || e.clientX,y: e.offsetY || e.clientY};self.writeBegin(point);});this.canvas.addEventListener('mouseup', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point,1);});this.canvas.addEventListener('mouseleave', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mousemove', function(e) {if(obj.isWrite) {var point = {x: e.offsetX,y: e.offsetY};self.writing(point);}});//移动端this.canvas.addEventListener('touchstart', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX || touch.clientX,y: touch.pageY || touch.clientY};self.writeBegin(point);});this.canvas.addEventListener('touchend', function(e) {var touch = e.changedTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point,1);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writing(point);});this.canvasInit();this.canvasClear();this.option = l = {clearCanvas: self.canvasClear};}/*** 初始化调用* 设置参数*/var writeCanvas = new WriteFont('canvas', {borderWidth: 10,writeWidth:3,borderColor: '#ff6666',isWriteName:true	//签名模式});ElementById('clear').onclick = function() {l.clearCanvas();};ElementById('save').onclick = function() {writeCanvas.saveAsImg()};ElementById('canvasUndo').onclick = function() {//撤销writeCanvas.canvasUndo();};ElementById('canvasRedo').onclick = function() {//反撤销writeCanvas.canvasRedo();};/*ElementById('changecolor').onclick = function(){writeCanvas.changecolor('red')}*/function changeColor($color){writeCanvas.changecolor($color);}</script>
</html>
效果如下
本文发布于:2024-02-05 05:18:21，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170725039563375.html
上一篇：年会签名动效
下一篇：php签名墙代码,第四届江苏志交会上，这面签名墙火了！
标签：canvas
留言与评论（共有 0 条评论）