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. spring相关—AOP编程—切入点、连接点

    1 切入点表达式 1.1 作用 通过表达式的方式定位一个或多个具体的连接点. 1.2 语法细节 ①切入点表达式的语法格式 execution([权限修饰符] [返回值类型] [简单类名/全类名] [方 ...

  2. WGS84与CGCS2000坐标系

    1.WGS84,WGS是世界大地测量系统World Geodetic System的缩写,84是说此坐标系是1984年建立的:   2.自上世纪60年代,美国军方相继推出WGS60.WGS66.WGS ...

  3. RFM - Customer Level Data

    Introduction ## Warning: package 'DT' was built under R version 3.5.2 RFM (recency, frequency, monet ...

  4. memset使用技巧

    memset可以对高位数组进行初始化,非常方便.需要注意的是memset的头文件是string.h和memory.h . 下面来谈memset的4个使用技巧: (注:一下dp高维数组都是全局变量,局部 ...

  5. GitBook github

    创建一个新的仓库 创建一个新文件,名为SUMMARY.md 创建一本书首先进入gitbook的官网:https://www.gitbook.com/ 创建账户https://github.com/ 在 ...

  6. [WEB安全]源码泄露总结

    原文链接:https://blog.csdn.net/qq_36869808/article/details/88895109 源码泄露总结: svn源码泄露:https://blog.csdn.ne ...

  7. 11月1号开学! 《jmeter性能测试实战》崭新亮相！

    课程介绍 第10期<jmeter性能测试实战>课程,11月2号开学!全新改版,和之前的课程框架完全不同 主讲老师:飞天小子 上课方式:每周六周日晚8点到10点,QQ群视频在线直播教学 本期 ...

  8. 利用Windows内置工具winsat测试硬盘速度（SSD&机械盘对比）

    利用Windows内置工具winsat测试硬盘速度(SSD&机械盘对比) 以下是红色内容是在命令行运行: C:\Users\Administrator>winsat diskWindow ...

  9. C# 序列化与反序列化之Binary与Soap无法对泛型List<T>进行序列化的解决方案

    C# 序列化与反序列化之Binary与Soap无法对泛型List<T>进行序列化的解决方案 新建Console控制台项目项目,然后添加Team和Person 这2个类,如下: Team和P ...

  10. java8在Stream的forEach操作时获取index

      import java.util.Objects; import java.util.function.BiConsumer; /** * * @author yangzhilong * @dat ...