[canvas基础]pc&mobile写字板
目的:实现canvas写字板
兼容:同时支持PC和mobile
功能:实现基础的写字板功能,未进行功能拓展,如,画布背景,画笔样式,记录步骤……
创建时间:2015年7月1日/最后修改时间:2015年7月2日
主要用到的事件:pc:mousedown,mousemove,mouseup,
mobile: touchstart, touchmove, touchend
publicFun: addEventListener <==> removeEventListener,
演示地址:http://runjs.cn/code/ke4jgto0
源代码:
html&css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> *{ margin: 0; padding: 0; } .can{ width: 500px; height: 300px; margin: 100px auto 0; border: 1px solid #c1c1c1; background-color: #414141; } .delete{ width: 100px; height: 50px; margin: 20px auto; background-color: red; text-align: center; line-height: 50px; } </style> <div class="can"> <canvas id="myCanvas"></canvas> </div> <div class="delete" id="delete">删除</div>
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
window.onload = function(){ var canvas = document.getElementById('myCanvas'), //拿到绘图环境 thisDorw = canvas.getContext('2d'); //定义大小 canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; var deleteBut = document.getElementById('delete'),//删除按钮 //定义事件类型,未初始化 drawBegin, drawIng, drawEnd; //检查是否支持触摸 function cnaTouch(){ if( 'ontouchend' in window ) { return true; }else{ return false; } } //定义事件名称 if( cnaTouch() ){ //触摸 drawBegin = 'touchstart'; drawIng = 'touchmove'; drawEnd = 'touchend'; }else{ drawBegin = 'mousedown'; drawIng = 'mousemove'; drawEnd = 'mouseup'; } //添加mousedown or touchstart事件 canvas.addEventListener(drawBegin,startTouch,false); //开始点击/触摸 function startTouch(){ thisDorw.beginPath(); thisDorw.lineWidth = 10; deleteBut.style.backgroundColor='#454545'; //开始触摸以后,绑定移动和结束事件 canvas.addEventListener(drawIng,moveTouch,false); canvas.addEventListener(drawEnd,endTouch,false); } //开始滑动 function moveTouch(e){ e.preventDefault(); var X = 0, Y = 0; //根据是否支持touch来控制X Y 的值 if( cnaTouch() ){ var touches = e.touches[0], X = touches.pageX - canvas.offsetLeft; Y = touches.pageY - canvas.offsetTop; }else{ X = e.pageX - canvas.offsetLeft; Y = e.pageY - canvas.offsetTop; } //开始画图 thisDorw.lineTo(X,Y); thisDorw.stroke(); } //结束滑动 function endTouch(){ deleteBut.style.backgroundColor='red'; //touch结束的时候,移出事件绑定 canvas.removeEventListener(drawIng,moveTouch,false); canvas.removeEventListener(drawEnd,endTouch,false); } //画布清空方法 deleteBut.onclick = function(){ thisDorw.clearRect(0,0,canvas.width,canvas.height) }; }