备案用的网站建设规划书怎么写,cad图做网站链接,网站建设创意广告,做盗版视频网站成本多少钱目录
1.HTML模板
2.获取DOM元素和定义变量
3.创建两个canvas元素#xff0c;并设置它们的宽度和高度
4.绑定触摸事件#xff1a;touchstart, touchmove, touchend和click
5.实现触摸事件回调函数#xff1a;startDrawing, draw和stopDrawing
6.实现绘制线段的函数并设置它们的宽度和高度
4.绑定触摸事件touchstart, touchmove, touchend和click
5.实现触摸事件回调函数startDrawing, draw和stopDrawing
6.实现绘制线段的函数drawLine
7.实现清除签名的函数clearSignature
8.实现保存签名的函数saveSignature
9.将canvas元素插入DOM树中
10.完整代码
11.效果图 1.HTML模板
!DOCTYPE html
html
headtitle/titlemeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1, minimum-scale1, maximum-scale1, user-scalableno /style/* 样式表 *//style
/head
body!-- 签名区域 --div idsignatureArea/div!-- 操作按钮清除和保存 --button idclearButton清除/buttonbutton idsaveButton保存签名/button!-- JavaScript代码 --script typetext/javascript// JavaScript代码/script
/body
/html2.获取DOM元素和定义变量
// 获取DOM元素
var signatureArea document.getElementById(signatureArea);
var clearButton document.getElementById(clearButton);
var saveButton document.getElementById(saveButton);// 定义变量
var isDrawing false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标3.创建两个canvas元素并设置它们的宽度和高度
// 创建两个canvas元素
var drawingCanvas document.createElement(canvas); // 用于绘制签名
var backgroundCanvas document.createElement(canvas); // 用于保存带有白色背景的签名图像
var drawingCtx drawingCanvas.getContext(2d); // 获取绘制画布的上下文对象
var backgroundCtx backgroundCanvas.getContext(2d); // 获取背景画布的上下文对象
drawingCanvas.width signatureArea.offsetWidth;
drawingCanvas.height signatureArea.offsetHeight;
backgroundCanvas.width drawingCanvas.width;
backgroundCanvas.height drawingCanvas.height;4.绑定触摸事件touchstart, touchmove, touchend和click
// 绑定触摸事件
signatureArea.addEventListener(touchstart, startDrawing);
signatureArea.addEventListener(touchmove, draw);
signatureArea.addEventListener(touchend, stopDrawing);
clearButton.addEventListener(click, clearSignature);
saveButton.addEventListener(click, saveSignature);5.实现触摸事件回调函数startDrawing, draw和stopDrawing
// 开始绘制
function startDrawing(e) {e.preventDefault(); // 阻止默认事件var touch e.touches[0]; // 获取触摸点坐标var rect signatureArea.getBoundingClientRect(); // 获取签名区域的位置和大小lastX touch.clientX - rect.left;lastY touch.clientY - rect.top;isDrawing true;
}// 绘制中
function draw(e) {if (!isDrawing) return;var touch e.touches[0];var rect signatureArea.getBoundingClientRect();var x touch.clientX - rect.left;var y touch.clientY - rect.top;drawLine(lastX, lastY, x, y);lastX x;lastY y;
}// 停止绘制
function stopDrawing() {isDrawing false;
}6.实现绘制线段的函数drawLine
// 绘制实线
function drawLine(x1, y1, x2, y2) {drawingCtx.beginPath(); // 开始一条新的路径drawingCtx.moveTo(x1, y1); // 将画笔移动到起点drawingCtx.lineTo(x2, y2); // 绘制一条直线到终点drawingCtx.lineWidth 1; // 设置线条的宽度为1像素drawingCtx.strokeStyle #000; // 设置线条颜色为黑色drawingCtx.stroke(); // 绘制线条
}7.实现清除签名的函数clearSignature
// 清除签名
function clearSignature() {drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); // 清除绘制画布的内容backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height); // 清除背景画布的内容
}8.实现保存签名的函数saveSignature
// 保存签名
function saveSignature() {// 绘制白色背景backgroundCtx.fillStyle white;backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);// 复制绘制的签名到带有白色背景的画布backgroundCtx.drawImage(drawingCanvas, 0, 0);// 将带有白色背景的画布内容转为PNG格式的DataURLvar dataURL backgroundCanvas.toDataURL(image/png);// 创建一个链接元素并设置下载属性var link document.createElement(a);link.href dataURL;link.download 签名.png; // 设置下载文件的名称// 检查是否支持保存到相册if (download in link) {link.style.display none;document.body.appendChild(link);link.click();document.body.removeChild(link);} else {// 如果不支持保存到相册你可以提供其他方式或提示用户手动保存alert(无法直接保存到相册请手动保存签名图片。);}
}9.将canvas元素插入DOM树中
// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);10.完整代码
!DOCTYPE html
html
headtitle/titlemeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1, minimum-scale1, maximum-scale1, user-scalableno /stylebody {font-family: Arial, sans-serif;}#signatureArea {width: 100%;height: 300px;border: 1px solid #ccc;margin-bottom: 20px;}button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;cursor: pointer;border-radius: 4px;}button:hover {background-color: #45a049;}/style
/head
bodydiv idsignatureArea/divbutton idclearButton清除/buttonbutton idsaveButton保存签名/buttonscript typetext/javascript
// 获取DOM元素
var signatureArea document.getElementById(signatureArea);
var clearButton document.getElementById(clearButton);
var saveButton document.getElementById(saveButton);// 定义变量
var isDrawing false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标// 创建两个canvas元素
var drawingCanvas document.createElement(canvas); // 用于绘制签名
var backgroundCanvas document.createElement(canvas); // 用于保存带有白色背景的签名图像
var drawingCtx drawingCanvas.getContext(2d);
var backgroundCtx backgroundCanvas.getContext(2d);
drawingCanvas.width signatureArea.offsetWidth;
drawingCanvas.height signatureArea.offsetHeight;
backgroundCanvas.width drawingCanvas.width;
backgroundCanvas.height drawingCanvas.height;// 绑定触摸事件
signatureArea.addEventListener(touchstart, startDrawing);
signatureArea.addEventListener(touchmove, draw);
signatureArea.addEventListener(touchend, stopDrawing);
clearButton.addEventListener(click, clearSignature);
saveButton.addEventListener(click, saveSignature);// 开始绘制
function startDrawing(e) {e.preventDefault();var touch e.touches[0];var rect signatureArea.getBoundingClientRect();lastX touch.clientX - rect.left;lastY touch.clientY - rect.top;isDrawing true;
}// 绘制中
function draw(e) {if (!isDrawing) return;var touch e.touches[0];var rect signatureArea.getBoundingClientRect();var x touch.clientX - rect.left;var y touch.clientY - rect.top;drawLine(lastX, lastY, x, y);lastX x;lastY y;
}// 停止绘制
function stopDrawing() {isDrawing false;
}// 绘制实线
function drawLine(x1, y1, x2, y2) {drawingCtx.beginPath();drawingCtx.moveTo(x1, y1);drawingCtx.lineTo(x2, y2);drawingCtx.lineWidth 1;drawingCtx.strokeStyle #000;drawingCtx.stroke();
}// 清除签名
function clearSignature() {drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
}// 保存签名
function saveSignature() {// 绘制白色背景backgroundCtx.fillStyle white;backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);// 复制绘制的签名到带有白色背景的画布backgroundCtx.drawImage(drawingCanvas, 0, 0);// 将带有白色背景的画布内容转为PNG格式的DataURLvar dataURL backgroundCanvas.toDataURL(image/png);// 创建一个链接元素并设置下载属性var link document.createElement(a);link.href dataURL;link.download 签名.png; // 设置下载文件的名称// 检查是否支持保存到相册if (download in link) {link.style.display none;document.body.appendChild(link);link.click();document.body.removeChild(link);} else {// 如果不支持保存到相册你可以提供其他方式或提示用户手动保存alert(无法直接保存到相册请手动保存签名图片。);}
}// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);/script
/body
/html11.效果图
