<!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. 刷题总结——小z的袜子（bzoj2038）

    题目: Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把 ...

  2. 常州模拟赛d6t3 噪音

    FJ有M个牛棚,编号1至M,刚开始所有牛棚都是空的.FJ有N头牛,编号1至N,这N头牛按照编号从小到大依次排队走进牛棚,每一天只有一头奶牛走进牛棚.第i头奶牛选择走进第p[i]个牛棚.由于奶牛是群体动 ...

  3. 转载： 找不到MSVCR90.dll、Debug vs Release及cppLapack相关

    今天调试程序时出现了,找不到MSCVR90.dll的错误,最好查找到了解决办法,原文链接如下:   http://hi.baidu.com/wpzhao/blog/item/72dc08f77ce9b ...

  4. concurrentHashMap面试题

    面试题: ConcurrentHashMap有哪些构造函数? ConcurrentHashMap使用什么技术来保证线程安全? ConcurrentHashMap的get方法是否要加锁,为什么? Con ...

  5. day2之爬取拉勾网

    认证流程 浏览器清空cookies 步骤一 访问拉勾网网站  https://www.lagou.com/ 做了些什么: 以get方式请求"https://www.lagou.com/&qu ...

  6. java私有构造函数

    1. 强调类的单例模式 public class Elvs { //公有的静态域,来说明该类只能有一个实例(实例化一次后,后面都是同一个实例) public static final Elvs INS ...

  7. Ajax && json(原始)

    function findSend() { $.ajax({ // async: false, // cache: true, type: "POST", url: "I ...

  8. Python练习题–持续更新

    1.你是一个高级测试工程师,现在要做性能测试,需要你写一个函数,批量生成一些注册使用的账号. 产生的账号是以@163.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大 ...

  9. hdu - 2667 Proving Equivalences(强连通)

    http://acm.hdu.edu.cn/showproblem.php?pid=2767 求至少添加多少条边才能变成强连通分量.统计入度为0的点和出度为0的点,取最大值即可. #include & ...

  10. CODEVS_1074 食物链

    #include<iostream> #include<algorithm> #include<cstring> #include<string> #d ...