html5 canvas手写字代码(兼容手机端)

<pre>
<!DOCTYPE html>
<html>
<head>
<title>画板实验</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
</style>
</head>
<body style="background: #FCBE00" >

<canvas id="myCanvas" ></canvas>

<div>
<button onclick="clean();">清 空</button>
<button onclick="save();">生成图片</button>
</div>

<img id='img'/>

<script type="text/javascript">
var canvas,board,img;
canvas = document.getElementById('myCanvas');
img= document.getElementById('img');

canvas.height = 300;
canvas.width = 300;

board = canvas.getContext('2d');

var mousePress = false;
var last = null;

function beginDraw(){
mousePress = true;
}

function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();
}
last = xy;

}

function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}

function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.offsetX+event.target.offsetLeft;
y = event.offsetY+event.target.offsetTop;
}
// log('x='+x+' y='+y);
return {x:x,y:y};
}

function log(msg){
var log = document.getElementById('log');
var val = log.value;
log.value = msg+'\n'+val;
}

function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}

function save(){
//base64
var dataUrl = canvas.toDataURL();
img.src = dataUrl;
}

function clean(){
board.clearRect(0,0,canvas.width,canvas.height);

}

board.lineWidth = 1;
board.strokeStyle="#0000ff";

canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
</script>

</body>
</html>
</pre>

html5 canvas手写字代码(兼容手机端)的更多相关文章

  1. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  2. 开源HTML5 Canvas游戏Runtime发布

    Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能 ...

  3. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  4. 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  5. 用TensorFlow教你手写字识别

    博主原文链接:用TensorFlow教你做手写字识别(准确率94.09%) 如需转载,请备注出处及链接,谢谢. 2012 年,Alex Krizhevsky, Geoff Hinton, and Il ...

  6. HTML5 Canvas 代码检测浏览器是否支持

    在创建HTML5 Canvas元素之前,首先要检测浏览器是否能够拿支持他,如果不支持,就要用文字或图片替代,检测代码如下所示. <!DOCTYPE html> <html> & ...

  7. 使用生成对抗网络（GAN）生成手写字

    先放结果 这是通过GAN迭代训练30W次,耗时3小时生成的手写字图片效果,大部分的还是能看出来是数字的. 实现原理 简单说下原理,生成对抗网络需要训练两个任务,一个叫生成器,一个叫判别器,如字面意思, ...

  8. tensorflow卷积神经网络与手写字识别

    1.知识点 """ 基础知识: 1.神经网络(neural networks)的基本组成包括输入层.隐藏层.输出层.而卷积神经网络的特点在于隐藏层分为卷积层和池化层(po ...

  9. 前端面试手写代码——JS函数柯里化

    目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...

随机推荐

  1. 关于Classloader（学习笔记）

    1)类加载的过程是怎么样的?①加载:根据具体需求,选择合适的加载器(Bootstrap ClassLoader不可直接获取.Extension ClassLoader.系统.自定义)来控制字节流的获取 ...

  2. firstResponder

    https://developer.apple.com/library/content/documentation/EventHandling/Conceptual/EventHandlingiPho ...

  3. 硬币游戏1——打表&&记忆化搜索

    题目 Alice和Bo在玩这样一个游戏,给定 $k$ 个数字 $a_1, a_2,..,a_k$.一开始有 $x$ 枚硬币,Alice和Bob轮流取硬币.每次所取的硬币的枚数一定要在 $k$ 个数当中 ...

  4. js 对小数进行格式化（保留小数，去除小数后的0）

    // 如果去零时需要保留位数: (比如 19.520100 --> 19.52) parseFloat(Number(19.520100).toFixed(2)) // 如果只想去除小数点后多余 ...

  5. MYSQL索引的作用和创建

    索引是查询优化最主要的方式: 查询方式: 一种是:全表扫描: 一种是:利用数据表上建立的所以进行扫描. 如:对表中name字段建立索引:则按照表中name字段进行索引排序,并为其建立指向数据表中记录所 ...

  6. CTSC 2017 游戏[概率dp 线段树]

    小 R 和室友小 B 在寝室里玩游戏.他们一共玩了 $n$ 局游戏,每局游戏的结果要么是小 R 获胜,要么是小 B 获胜. 第 $1$ 局游戏小 R 获胜的概率是 $p_1$,小 B 获胜的概率是 $ ...

  7. python3-django+uwsgi+supervisor+nginx跳坑指南（记录）

    首先运行django项目:在项目目录内: python manage.py runserver 0.0.0.0:8000 外部服务器访问:http://www.xxx.com:8000/ 可以正常运行 ...

  8. linux 配置启动supervisor详细

    参考自强学堂:https://code.ziqiangxuetang.com/django/django-nginx-deploy.html 例子中zqxt项目 安装 supervisor 软件包 ( ...

  9. 简单find命令的实现

    贴代码: /*实现一个简单的find命令:*//*程序思路:首先,用一个单链表将所需要的信息存储起来:其次根据所传入的参数信息,改变节点的状态(若有这个状态,证明该节点就是我们所需要的)最后将所需要的 ...

  10. windows安装IIS不成功的原因

    一.背景 之前做过一段时间的实施,因此总结一下IIS安装不成功会有哪些原因导致的,希望给踩坑的人提供思路和帮助. 二.分析原因 1.系统问题,比如Windows家庭版本(独白:我之前花了一天的时间安装 ...