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. includes方法 使用 Object.defineProperty 扩展 ，解决不兼容问题

    原文链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes ...

  2. (4)给树莓派安装中文输入法Fcitx及Google拼音输入法

    sudo apt-get install fcitx fcitx-googlepinyin fcitx-module-cloudpinyin fcitx-sunpinyin 安装完毕,重启即可.

  3. Word pair Hu

    Memorize words in the way of games, learn foreign languages, and be more handy

  4. node.js封装数据库增删改查

    数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...

  5. c# 如何进行动态加载dll

    最近遇到了在c#中如何进行动态加载dll的话,搞定了,下面介绍一下自己的步骤. 1,新建dll. 打开vs,新建project->Class Library->项目名为testdll1.在 ...

  6. 洛谷 P3806 【模板】点分治1-树分治(点分治，容斥版) 模板题-树上距离为k的点对是否存在

    P3806 [模板]点分治1 题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入格式 n,m 接下来n-1条边a,b,c描述a到b有一条长度 ...

  7. win10系统2分钟睡眠

    https://blog.csdn.net/widenstage/article/details/78982722 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSe ...

  8. Codeforces1254B2 Send Boxes to Alice (Hard Version)(贪心)

    题意 n个数字的序列a,将i位置向j位置转移x个(a[i]-x,a[j]+x)的花费为\(x\times |i-j|\),最终状态可行的条件为所有a[i]均被K整除(K>1),求最小花费 做法 ...

  9. JDBC PreparedStatement Statement

    参考:预编译语句(Prepared Statements)介绍,以MySQL为例 1. 背景 本文重点讲述MySQL中的预编译语句并从MySQL的Connector/J源码出发讲述其在Java语言中相 ...

  10. ThreadPoolExecutor的坑

    ExecutorService executorService = new ThreadPoolExecutor(0, MAX_THREAD_NUM, 60, TimeUnit.SECONDS, ne ...