<!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. vue之二级路由

    router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...

  2. __getattr__ 与 __getattribute__的区别

    原文博客地址 http://www.cnblogs.com/bettermanlu/archive/2011/06/22/2087642.html

  3. Moya 与 RxSwift 使用

    如在OC中使用AFNetworking一般,Swift我们用Alamofire来做网络库.而Moya在Alamofire的基础上又封装了一层: 1.关于moya moya 官方说moya有以下特性-_ ...

  4. 解决 IDEA 中src下xml等资源文件无法读取的问题

    该问题的实质是,idea对classpath的规定. 在eclipse中,把资源文件放在src文件夹下,是可以找到的: 但是在idea中,直接把资源文件放在src文件夹下,如果不进行设置,是不能被找到 ...

  5. Iptables入门教程

    转自:http://drops.wooyun.org/tips/1424 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组件组成. netfilter ...

  6. msp430项目编程43

    msp430综合项目---蓝牙控制直流电机调速系统43 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  7. C/C++怎样传递二维数组，转载自CSDN

    用二维数组作为参数传递(用二维数组处理矩阵),但是希望接受传递二维数组参数的函数可以处理任意维度的数组(希望矩阵的行数和列数都是不固定的). [以下转帖] ---------------------- ...

  8. flask-script插件

    首先在启动Flask项目时,我们可以传不同的参数作为运行参数.但是我们只能在入口app.run()传参.这样十分的不方便.Flask-Script 是一个 Flask 扩展,为 Flask 程序添加了 ...

  9. python--错误了就需要调试（异常处理）

    python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 我们可打开idle-->F1进行查看文档,里面很多异常类型,如图: ...

  10. IOC基本理解

    什么是IOC? IOC全称为控制反转(Inversion Of Control),别名依赖注入(Dependency Injection). 控制反转即指我们获取依赖的方式发生了反转. 假设存在如下情 ...