zoukankan html css js c++ java
自己写的canvas 手写画板

<!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;150px;height:100px;font-size:40px;">清除</button>
                        <button class="save" style="cursor:pointer;margin-top:10px;margin-left:10px;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>
查看全文
相关阅读:
中间件格式
 python3 bytes与str数据类型相互转换
 python 连接mongodb 使用
 md5 简单加密
 django 使用https协议运行runserver
工厂模式
 C++字符串
 C++字符
 C++数学函数
 MATLAB函数总结——数值运算和符号运算
原文地址：https://www.cnblogs.com/zjdeblog/p/6611185.html