Html5Canvas打造的画图板,利用鼠标点击移动画图,完成之后可以保存为png格式的图片。
小杰鼠标画的,见谅,代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas画板</title> </head> <body> <div style="width:600px;height:350px;"><canvas style="background-color:#efefef;border:1px solid #ddd;" id="myCanvas"></canvas></div> <div style="width:600px;text-align:center;margin-top:30px;"> <button onclick="clean();">清 空</button> <button onclick="save();">生成图片</button> </div> <img id='img' alt='' /> <script type="text/javascript"> var canvas,board,img; canvas = document.getElementById('myCanvas'); img= document.getElementById('img'); canvas.height = 350; canvas.width = 600; 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; } 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(){ var dataUrl = canvas.toDataURL(); img.src = dataUrl; } function clean(){ board.clearRect(0,0,canvas.width,canvas.height); } board.lineWidth = 1; board.strokeStyle="#2AA6C0"; 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>原文地址:pyoblog
发表评论: