html5 canvas手写字代码(兼容手机端)画板实验 <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>
查看原文:http://newmiracle.cn/?p=1199
html5 canvas手写字代码(兼容手机端)
最新推荐文章于 2024-05-23 09:24:55 发布