<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" /> <title>sxqm</title> <meta name="format-detection" content="telephone=no"> <script src="/assets/js/jquery.min.js" type="text/javascript"></script> <script src="/assets/js/jquery.mobile.custom.min.js" type="text/javascript"></script> </head> <body> <canvas id="myCanvas"></canvas> <div> <button onclick="clean();">清 空</button> <button onclick="save();">生成图片</button> </div> </body> </html>
var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; canvas.width = 400; board = canvas.getContext('2d'); board.lineWidth = 1; //设置画笔粗细 board.strokeStyle = "#f00"; board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接 var mousePress = false; var last = null; function beginDraw(event) { mousePress = true; } function endDraw(event) { mousePress = false; event.preventDefault(); last = null; } function drawing(event) { event.preventDefault(); if (!mousePress) return; var xy = GetPos(event); if (last != null) { board.beginPath(); board.moveTo(last.x, last.y); board.lineTo(xy.x, xy.y); board.stroke(); } last = xy; } function GetPos(event) { var isTouch = event.type.indexOf('touch') >= 0 ? true : false; var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft; var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop; return { x: x, y: y }; } function save() { var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据,并进行Base64编码 var img = new Image(); img.src = data; $(document.body).append(img); } function clean() { board.clearRect(0, 0, canvas.width, canvas.height); } canvas.onmousedown = beginDraw; canvas.onmousemove = drawing; canvas.onmouseup = endDraw; canvas.addEventListener('touchstart', beginDraw, false); canvas.addEventListener('touchmove', drawing, false); canvas.addEventListener('touchend', endDraw, false);