[canvas基础]pc&mobile写字板

最新推荐文章于 2024-09-13 22:08:42 发布

weixin_30412577

最新推荐文章于 2024-09-13 22:08:42 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxyy1122/p/4615184.html

本文介绍了一个基础的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

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)
            };

        }