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>
查看全文
相关阅读:
清除缓冲
 iOS 10 开发相机相关的适配
 UIImagePickerControllerDelegate---ActionSheet---获得设备型号
 4，4s屏幕过渡页处理
 iOS小技巧3
UIWebView中Html中用JS调用OC方法及OC执行JS代码
 删除本地文件
 NSArray倒序
 tableView和scrollView滚动起冲突
 在UIScrollView的delegate方法判断滚动快慢
原文地址：https://www.cnblogs.com/zjdeblog/p/6611185.html