[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

<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>

View Code

js

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)

            };



        }

View Code