<!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. BZOJ 3750: [POI2015]Pieczęć 【模拟】

    Description 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色. 你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上的图案.印的过程中需要 ...

  2. VS链接错误: LNIK1123

    问题:编译一个VS工程程序,出现连接错误:"LNK1123: 转换到 COFF 期间失败: 文件无效或损坏" 原因分析:连接器LNK是通过调用cvtres.exe完成文件向coff ...

  3. ajax同步导致ajax上面的代码不执行？

    js代码:环境:IE11要求:点击一个按钮后,页面xxx的地方立即显示"开始处理...",直到ajax处理结束后,xxx内容才更新为新的处理结果:点击事件执行代码如下:xxx.in ...

  4. HashTable的构造函数有哪些

    HashTable:在并发的环境下,使用synchronized将整张表锁住: HashTable构造函数有: public Hashtable(int initialCapacity, float ...

  5. bzoj3609 [Heoi2014]人人尽说江南好 博弈

    [Heoi2014]人人尽说江南好 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 581  Solved: 420[Submit][Status][D ...

  6. Nearest Common Ancestors（poj 1330）

    题意:给定一棵树,询问两个节点的最近公共祖先. 输入:第一行T,表示测试组数. 每组测试数据包含一个n,表示节点数目,下面n-1行是连接的边,最后一行是询问 输出:共T行,代表每组的测试结果 /* 倍 ...

  7. 洛谷 P 1119 灾后重建

    题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...

  8. 在App_Data中创建数据库获取连接串简便方法！

    原文发布时间为:2008-07-25 -- 来源于本人的百度文章 [由搬家工具导入] 1、在App_Data右击添加一个SQL数据库2、双击该数据库，在左边添加表，并显示表数据进行添加数据3、把刚刚创 ...

  9. Docker安装运行Redis

    Mac环境 查询镜像: zhoumatoMBP:~ zhou$ docker search redis NAME DESCRIPTION STARS OFFICIAL AUTOMATED redis ...

  10. Codeforces 486D Valid Sets （树型DP）

    题目链接 Valid Sets 题目要求我们在一棵树上计符合条件的连通块的个数. 满足该连通块内,点的权值极差小于等于d 树的点数满足 n <= 2000 首先我们先不管这个限制条件,也就是先考 ...