<!DOCTYPE html>

<html>

        <head>

                <title>canvas</title>

                <meta charset="utf-8" >

                <script src="js/jquery.js"></script>

        </head>

        <body>

                <div>

                        <canvas id="canvas" width="1000px;" height="500px" style="background:green;border:1px solid #fff;"></canvas><br/>

                        <button class="clear" style="cursor:pointer;margin-top:10px;margin-left:10px;width:150px;height:100px;font-size:40px;">清除</button>

                        <button class="save" style="cursor:pointer;margin-top:10px;margin-left:10px;width:180px;height:100px;font-size:40px;">保存图片</button>

                        <div class="img"><img src=""></div>

                </div>

                <script>

                        var c = document.getElementById("canvas");

                        var ctx = c.getContext("2d");

                        ctx.lineWidth = '5';

                        var bbox = c.getBoundingClientRect();

//                        ctx.moveTo(0, 0);

//                        ctx.lineTo(290, 140);

//                        ctx.stroke();

                        var state = '';

                        $(".clear").click(function () {

                            ctx.beginPath();

                            ctx.clearRect(0, 0, 1000, 500);

                        })

                        function browserRedirect() {

                            var sUserAgent = navigator.userAgent.toLowerCase();

                            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";

                            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";

                            var bIsMidp = sUserAgent.match(/midp/i) == "midp";

                            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

                            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";

                            var bIsAndroid = sUserAgent.match(/android/i) == "android";

                            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";

                            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

                            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

                                $("body").on("touchstart", "#canvas", function (e) {

                                })

                                $("body").on("touchmove", "#canvas", function (e) {

                                    e.preventDefault();

                                    var _touch = e.originalEvent.targetTouches[0];

                                    var x = _touch.clientX - bbox.left * (c.width / bbox.width);

                                    var y = _touch.clientY - bbox.top * (c.height / bbox.height);

                                    if (!state) {

                                        ctx.moveTo(x, y);

                                        state = '1';

                                    }

                                    ctx.lineTo(x + 1, y + 1);

                                    ctx.strokeStyle = '#AACDEE';

                                    ctx.stroke();

                                })

                                $("body").on("touchend", "#canvas", function (e) {

                                    state = '';

                                })

                            } else {

                                var state = '';

                                $("body").on("mousedown", "#canvas", function () {

                                    $("body").on("mousemove", "#canvas", function (e) {

                                        var x = e.clientX - bbox.left * (c.width / bbox.width);

                                        var y = e.clientY - bbox.top * (c.height / bbox.height);

                                        if (!state) {

                                            ctx.moveTo(x, y);

                                            state = '1';

                                        }

                                        ctx.lineTo(x + 1, y + 1);

                                        ctx.strokeStyle = '#AACDEE';

                                        ctx.stroke();

                                        console.log(x, y);

                                    })

                                })

                                $("body").on("mouseup", "#canvas", function () {

                                    state = '';

                                    $("body").off("mousemove", "#canvas");

                                })

                            }

                        }

                        browserRedirect();

                        $(".save").click(function () {

                            var img = c.toDataURL();

                            $(".img img").attr("src", img);

                        })

                </script>

        </body>

</html>

自己写的canvas 手写画板的更多相关文章

  1. 最新用WPF为触摸屏写了一个手写程序，双格输入的

    原文:最新用WPF为触摸屏写了一个手写程序,双格输入的 双格输入可以提高手写速度,当前字写完以后可以自动识别提交,写下一个字.这样比单格手写速度提高一倍.特别适合触摸屏程序使用 界面如下: 程序如下: ...

  2. Android 手写Binder 教你理解android中的进程间通信

    关于Binder,我就不解释的太多了,网上一搜资料一堆,但是估计还是很多人理解的有困难.今天就教你如何从 app层面来理解好Binder. 其实就从我们普通app开发者的角度来看,仅仅对于androi ...

  3. 背水一战 Windows 10 (62) - 控件（媒体类）: InkCanvas 保存和加载, 手写识别

    [源码下载] 背水一战 Windows 10 (62) - 控件(媒体类): InkCanvas 保存和加载, 手写识别 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) ...

  4. 5 TensorFlow入门笔记之RNN实现手写数字识别

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  5. 《四 spring源码》手写springioc框架

    手写SpringIOCXML版本 /** * 手写Spring专题 XML方式注入bean * * * */ public class ClassPathXmlApplicationContext { ...

  6. 基于vue手写tree插件那点事

    目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对 ...

  7. TensorFlow实战第五课（MNIST手写数据集识别）

    Tensorflow实现softmax regression识别手写数字 MNIST手写数字识别可以形象的描述为机器学习领域中的hello world. MNIST是一个非常简单的机器视觉数据集.它由 ...

  8. 手写一个Redux，深入理解其原理

    Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理.我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码 ...

  9. 手写简易SpringMVC

    手写简易SpringMVC 手写系列框架代码基于普通Maven构建,因此在手写SpringMVC的过程中,需要手动的集成Tomcat容器 必备知识: Servlet相关理解和使用,Maven,Java ...

随机推荐

  1. 算法复习——半平面交（bzoj2618凸多边形）

    讲解: 这里套用wuvin神犇的ppt,附上友情链接:http://blog.leanote.com/wuvin 半平面交: 算法流程: 注意事项: 例题: Description 逆时针给出n个凸多 ...

  2. idea下springboot打包成jar包和war包，并且可以在外部tomcat下运行访问到

    接着上一章走呗:http://www.cnblogs.com/sxdcgaq8080/p/7712874.html 然后声明一点,下面打包的过程中,scope一直都是使用默认的范围 <!--用于 ...

  3. Day 12 shell语法及程序若干

    1. 现归纳一下shell中的运算符:       +:对两个变量做加法.    -:对两个变量做减法.    *:对两个变量做乘法.    /:对两个变量做除法.    **:对两个变量做幂运算.  ...

  4. TCP No-Delay

    Nagle 算法 由于TCP中包头的大小是固定的,所以在数据(Payload)大小很小的时候IP报文的有效传输率是很低的,Nagle算法就是将多个即将发送的小段的用户数据,缓存并合并成一个大段数据时, ...

  5. Chrome 浏览器安装Vue插件方法 (十分详细)

    博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...

  6. 【hibernate spring data jpa】执行了save()方法 sql语句也执行了，但是数据并未插入数据库中

    执行了save()方法  sql语句也执行了,但是数据并未插入数据库中 解决方法: 是因为执行了save()方法,也执行了sql语句,但是因为使用的是 @Transactional 注解,不是手动去提 ...

  7. Tips/Tricks in Deep Neural Networks

    转自: http://lamda.nju.edu.cn/weixs/project/CNNTricks/CNNTricks.html

  8. Python基础语法04-数据结构

    Python Number(数字) Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. Python 支持 ...

  9. 将一个文件从gbk编码转换为utf8编码

    用django展示模板时,出现如下错误: 'utf8' codec can't decode byte 0xd3 in position 197: invalid continuation byte ...

  10. HDU 1501

    Zipper Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...