学习伴随一生
没有绝对,只有相对
<!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);

 

posted on 2015-09-07 13:40  蒋正  阅读(5606)  评论(0编辑  收藏  举报