清 空
生成图片
var canvas, board;
canvas = document.getElementById('myCanvas');
canvas.height = 300;
canvas.width = 400;
board = canvas.getContext('2d');
board.lineWidth = 1; //设置画笔粗细
board.strokeStyle = "#f00";
board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
var mousePress = false;
var last = null;
function beginDraw(event) {
mousePress = true;
}
function endDraw(event) {
mousePress = false;
event.preventDefault();
last = null;
}
function drawing(event) {
event.preventDefault();
if (!mousePress) return;
var xy = GetPos(event);
if (last != null) {
board.beginPath();
board.moveTo(last.x, last.y);
board.lineTo(xy.x, xy.y);
board.stroke();
}
last = xy;
}
function GetPos(event) {
var isTouch = event.type.indexOf('touch') >= 0 ? true : false;
var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;
var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop;
return { x: x, y: y };
}
function save() {
var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据,并进行Base64编码
var img = new Image();
img.src = data;
$(document.body).append(img);
}
function clean() {
board.clearRect(0, 0, canvas.width, canvas.height);
}
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart', beginDraw, false);
canvas.addEventListener('touchmove', drawing, false);
canvas.addEventListener('touchend', endDraw, false);
canvas画布实现手写签名效果
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码:
Ionic5手写签名SignaturePad
测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...
html5 手写的canvas实现
试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{ penColor:'#FF0000', penWidt ...
用canvas实现手写签名功能
最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...
WORD2003电子签名插件(支持手写、签章)
1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...
android-------手写签名系统的设计与实现之实现画笔设置
引自:http://www.xuebuyuan.com/1754358.html 既然我们实现了画布和画笔,也实现了手写,为了提高可用性,我们增加了对画笔风格的设置功能,这样就可以根据自己的需要选择画 ...
关于HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是:
随机推荐
vsftp 使用匿名帐号登陆
1.正常安装. 2.改配置文件:vi /etc/vsftpd/vsftpd.conf #允许匿名用户登录FTP anonymous_enable=YES #设置匿名用户的登录目录(如需要,需自己添加并 ...
Android常用动画alpha和rotate同时使用
Android的动画可以是一种动画,也可以多种动画作用于一张图片上,如RotaeAnimation和AlphaAnimation同时放到一个配置文件中 alpha1.xml <?xml vers ...
二叉树遍历 C#
二叉树遍历 C# 什么是二叉树 二叉树是每个节点最多有两个子树的树结构 (1)完全二叉树——若设二叉树的高度为h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第h层有叶子结点,并 ...
MySQL grant命令使用
MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...
吾八哥学Python(五):Python基本数学运算
今天我们学习Python里的基本数学运算方法,还是通过例子来练习吧! 加减乘除求余 #加法 print(12+34) #减法 print(30-10.0) #乘法 print(3*5) #除法 pri ...
什么是BOM?,什么是DOM? BOM跟DOM之间的关系
什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...
.7-浅析webpack源码之WebpackOptionsDefaulter模块
WebpackOptionsDefaulter模块 通过参数检测后,会根据单/多配置进行处理,本文基于单配置,所以会进行到如下代码: if (Array.isArray(options)) { com ...
Spring Boot 2 (三):Spring Boot 2 相关开源软件
Spring Boot 2 (三):Spring Boot 2 相关开源软件 一.awesome-spring-boot Spring Boot 中文索引,这是一个专门收集 Spring Boot 相 ...
人工智能_机器学习——pandas - 箱型图
箱型图对数据的展示也是非常清晰的,这是箱型图的一些代码 #导报 机器学习三剑客 import numpy as np import pandas as pd from matplotlib impor ...
链式编程:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)
public class NutritionFacts { private final int servingSize; private final int servings; private fin ...