<!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. MyEclipse6.5增加对Tomcat7的支持

    MyEclipse6.5增加对Tomcat7的支持 最近在研究Servlet3.0,它是JavaEE6.0规范中的一部分 而Servlet3.0对服务器是有要求的,比如Tomcat7+(而Tomcat ...

  2. 对象数据源objectdatasource的使用，类的编写实现查询增删改的方法

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  3. indexedDB 增删改查

    /** * 打开数据库 */ export function openDB() { return new Promise((resolve, reject) => { let indexedDB ...

  4. Java面试题集（二）

    51.设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1,写出程序.  以下程序使用内部类实现线程,对j增减的时候没有考虑顺序问题. public class ThreadTest1 ...

  5. excel批量导入数据库SQL server

    思路: 第一是文件上传,可以参照Jakarta的FileUpload组件,用普通的Post也就行了.第二是Excel解析,用JSL或者POI都行第三是数据保存,这个应该简单吧,一个循环,一行对应一条数 ...

  6. Oracle 12c在SQL Devolper中添加cdb和pdb连接

    Oracle 12c如果按默认流程安装的话会有一个叫orcl的cdb容器和一个叫pdborcld的pdb容器 一.连接名为orcl的cdb容器 连接名:localorcl 用户名:SYS 口令:Ora ...

  7. IntelliJ IDEA出现：This file is indented with tabs instead of 4 spaces的问题解决

    根据阿里巴巴Java开发手册,不能使用Tab字符,改成4个字符,设置如下: 注意:是不选择! 一定要选择这个:

  8. PythonCookbook读书笔记

    第一章 数据结构和算法 1.1 将序列分解为单独的变量 适用于元组.列表.字符串等.只要是可迭代的对象,都可以执行分解操作.唯一的要求是变量的总数和结构要与序列相同. 1.2 从任意长度的可迭代对象中 ...

  9. ubuntu 14.04安装nodejs

    http://stackoverflow.com/questions/32902699/cannot-install-ember-on-ubuntu-1404/33495134

  10. tcp三次握手和syn 洪水攻击

    1. 连接后,所有的 ack 为1才有效(连接后,ack 也一般都是1) 2. 建立连接3次握手, 如何确认对方收到了你发的包, seq 是自己发出去的,自己知道seq的值.所以怎么确认对方收到了自己 ...