Html代码
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> <!-- 定义画板的区域 --> <canvas id="myCanvas" style="background-color: black; border: 1px solid #BFBFBF;"></canvas><br/> <!-- 清空画板的按钮 --> <button onclick="clean();" style="height: 3em;width: 5em;">清 空</button> <!-- 根据画板里的内容,生成图片 --> <button onclick="savePic();" style="height: 3em;width: 6em;">生成图片</button><br/> <!-- 生成的图片存放的img标签 --> <img id="img" alt="请签名" width="100px" /> <script type="text/javascript"> var canvas; //定义一个全局的 canvas var board; //定义一个画板的 全局变量 var img; //图片 var mousePress = false; //鼠标按压全局变量 , 默认不按压 var last = null; //最后的按压点全局变量 ,默认没有最后按压坐标 //页面加载后进行的操作 $(function(){ canvas = document.getElementById(‘myCanvas‘); //指定canvas区域 img= document.getElementById(‘img‘); //获取图片 canvas.height = 300; //定义 canvas 的高度 canvas.width = 500; //定义 canvas 的宽度 board = canvas.getContext(‘2d‘); //创建画板 board.lineWidth = 2; //画板的书写字体宽度 board.strokeStyle = "#F5270B"; //画板的书写的字体颜色 board.stroke(); canvas.onmousedown = beginDraw; canvas.onmousemove = drawing; canvas.onmouseup = endDraw; canvas.addEventListener(‘touchstart‘,beginDraw,false); canvas.addEventListener(‘touchmove‘,drawing,false); canvas.addEventListener(‘touchend‘,endDraw,false); }); /** * 开始画画,将鼠标按压全局变量设为true */ function beginDraw(){ mousePress = true; } /** * 画画 */ function drawing(event){ //算出canvs距离顶部的坐标,如果画板的顶部不在页面的最上边,会非常有用 var canvs_top = $(‘#myCanvas‘).offset().top; event.preventDefault(); //如果没有按压,返回 if(!mousePress)return; //获取点触点的坐标 var xy = pos(event); //如果最后的按压点全局变量 不为空,证明手或鼠标没有松开过,从最后按压点到现在按压点划线 if(last!=null){ board.beginPath(); board.moveTo(last.x,last.y-canvs_top); board.lineTo(xy.x,xy.y - canvs_top); board.lineWidth = 2; board.strokeStyle = "#F5270B"; board.stroke(); } //将最后的按压点全局变量设置为当前的按压点坐标 last = xy; } /** * 结束画画 */ function endDraw(event){ mousePress = false; event.preventDefault(); last = null; } /** * 生成的图片存放的img标签 */ function savePic(){ var dataUrl = canvas.toDataURL(); img.src = dataUrl; } /** * 清空画板 */ function clean(){ board.clearRect(0,0,canvas.width,canvas.height); } /** * 获取按压点的坐标 */ 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; } } </script>
时间: 2024-10-22 05:31:33