zoukankan      html  css  js  c++  java
  • html5 canvas手写字代码(兼容手机端)

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

    <pre>
    <!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+' '+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>
    </pre>

  • 相关阅读:
    h5 input调起摄像头、摄像机、录音机
    基数排序
    快速排序 && 希尔排序 && 插入排序
    堆排序
    归并排序(Merge sort)
    动态规划:背包问题
    Chap5: question: 29
    排列 && 组合
    Chap4: question: 19
    Chap3: question: 11
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11871509.html
Copyright © 2011-2022 走看看