html5 canvas手写字代码(兼容手机端)

html5 canvas手写字代码(兼容手机端)

<!DOCTYPE html>
<html>
<head>
    <title>画板实验</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
    </style>
</head>
<body style="background: #FCBE00" >

<canvas id="myCanvas" ></canvas>

<div>
    <button onclick="clean();">清 空</button>
    <button onclick="save();">生成图片</button>
</div>

<img id='img'/>

<script type="text/javascript">
    var canvas,board,img;
    canvas = document.getElementById('myCanvas');
    img= document.getElementById('img');

    canvas.height = 300;
    canvas.width = 300;

    board = canvas.getContext('2d');

    var mousePress = false;
    var last = null;

    function beginDraw(){
        mousePress = true;
    }

    function drawing(event){
        event.preventDefault();
        if(!mousePress)return;
        var xy = pos(event);
        if(last!=null){
            board.beginPath();
            board.moveTo(last.x,last.y);
            board.lineTo(xy.x,xy.y);
            board.stroke();
        }
        last = xy;

    }

    function endDraw(event){
        mousePress = false;
        event.preventDefault();
        last = null;
    }

    function pos(event){
        var x,y;
        if(isTouch(event)){
            x = event.touches[0].pageX;
            y = event.touches[0].pageY;
        }else{
            x = event.offsetX+event.target.offsetLeft;
            y = event.offsetY+event.target.offsetTop;
        }
//               log('x='+x+' y='+y);
        return {x:x,y:y};
    }

    function log(msg){
        var log = document.getElementById('log');
        var val = log.value;
        log.value = msg+'\n'+val;
    }

    function isTouch(event){
        var type = event.type;
        if(type.indexOf('touch')>=0){
            return true;
        }else{
            return false;
        }
    }

    function save(){
        //base64
        var dataUrl = canvas.toDataURL();
        img.src = dataUrl;
    }


    function clean(){
        board.clearRect(0,0,canvas.width,canvas.height);

    }

    board.lineWidth = 1;
    board.strokeStyle="#0000ff";


    canvas.onmousedown = beginDraw;
    canvas.onmousemove = drawing;
    canvas.onmouseup = endDraw;
    canvas.addEventListener('touchstart',beginDraw,false);
    canvas.addEventListener('touchmove',drawing,false);
    canvas.addEventListener('touchend',endDraw,false);
</script>


</body>
</html>

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1199

发表评论

电子邮件地址不会被公开。 必填项已用*标注