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. js 队列

    js 中的异步队列(micro & macro) js都是靠事件驱动的, js中的事件循环机制是什么呢? 只是简单写一下自己的理解, 所以不是很全面; js 程序执行有 主队列 以及 异步队列 ...

  2. nginx.conf 配置解析之 events配置

    worker_connections 1024; 定义每个work_process同时开启的最大连接数,即允许最多只能有这么多连接. accept_mutex on; 当某一个时刻只有一个网络连接请求 ...

  3. YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated, as the default Loader is unsafe

    test.py import os import sys sys.path.append(])+'/lib/lib3.7') import yaml with open("default.y ...

  4. 通过shell脚本查看python版本并比较

    a.py import sys print(].split(])) test.sh #!/bin/sh zero= x=`python a.py` y="3.6" status=` ...

  5. shell for 循环演示

    test.sh #!/bin/bash for skill in Ada Coffe Action Java; do echo "I am good at ${skill}Script&qu ...

  6. 面试官问我：平常如何对你的 Java 程序进行调优？

    阅读本文大概需要 10 分钟. 作者:张俊城, 郭理勇, 刘建来源:http://t.cn/AiCTERJz Java 应用性能优化是一个老生常谈的话题,典型的性能问题如页面响应慢.接口超时,服务器负 ...

  7. 如何优雅地执行dubbo"单测"

    很多小伙伴所在的公司是基于Dubbo来构建技术栈的,日常开发中必不可少要写dubbo单测(单元测试),如果单测数据依赖已有的外部dubbo服务,一般是mock数据,如果数据比较复杂,其实mock数据也 ...

  8. 如何去掉word中英文单词下的红色波浪线

    文件  ->选项 ->校对 在 只隐藏此文档中的拼写错误(S) 选项前打钩,点击确定即可

  9. 【转】Android root检测方法总结

    一 为什么要进行root检测?出于安全原因,我们的应用程序不建议在已经root的设备上运行,所以需要检测是否设备已经root,以提示用户若继续使用会存在风险. 二 root了会有什么风险?在Linux ...

  10. C# ctpclient networkstream 使用 BinaryReader的ReadString但是使用streamReader的Readtoend不行

    BinaryReader.ReadString是和BinaryWriter.Write(string)使用详解链接:https://ask.csdn.net/questions/184965