<!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>