首页 > 代码库 > 我画你猜（一）

我画你猜（一）

2024-11-23 08:20:39   202人阅读

----- 最近同事老拉着玩一个游戏《我画你猜》，非常好玩，于是作为码农尝试着自己做个。

先实现画布的简单功能；简单的把功能封装了两个类

（1）元素类，也是整个画画功能的进入点

/*****元素类*****/
function DrawElement(cavId,clearId,eraserId){
    this.ele = document.getElementById(cavId);
    this.clearBnt = document.getElementById(clearId);
    this.eraserBnt = document.getElementById(eraserId);
    //是否是橡皮擦模式
    this.isEraser = false;
    this.draw = new Draw(this.ele);
    var that = this;
    //获取画笔的x和y
    this.getXY = function(xOrY){
        if(xOrY === ‘x‘) return this.pageX - that.ele.offsetLeft;
        return this.pageY - that.ele.offsetTop;
    }
}

DrawElement.prototype.init = function(){
    var ele = this.ele;
    var draw = this.draw;
    var getXY = this.getXY;
    var that = this;
    ele.onmousedown = function(e){
        var ev = e || window.event;
        draw.drawBegin(getXY.call(ev,‘x‘),getXY.call(ev));
    };
    ele.onmousemove = function(e){
        var ev = e || window.event;
        if(that.isEraser){
            draw.clear(getXY.call(ev,‘x‘),getXY.call(ev));
        }else{
            draw.drawMiddle(getXY.call(ev,‘x‘),getXY.call(ev));
        }
    };
    ele.onmouseup = function(){
        draw.drawEnd();
    };
    ele.onmouseleave = function(){
        draw.drawEnd();
    };
    //清除画布
    this.clearBnt.onclick = function(){
        draw.clearAll();
    };
    //进入橡皮擦模式
    this.eraserBnt.onclick = function(e){
        var ev = e || window.event;
        that.isEraser = !that.isEraser;
        ev.target.innerText = that.isEraser?"继续画画":"橡皮擦"
    };
}

（2）画画类

/*****画画类*****/
function Draw(cvs,isBegin){
    this.begin = isBegin || false;
    this.cvs = cvs;
    this.cvx = cvs.getContext("2d");
}

Draw.prototype.drawBegin = function(x,y){
    this.begin = true;
    var cvx = this.cvx;
    cvx.beginPath();
    cvx.moveTo(x, y);
}

Draw.prototype.drawMiddle = function(x,y){
    var cvx = this.cvx;
    if(this.begin){
        cvx.lineTo(x, y);
        cvx.stroke();
    }
}

Draw.prototype.drawEnd = function(){
    this.begin = false;
}

//橡皮擦功能
Draw.prototype.clear = function(x,y){
    if(this.begin){
        this.cvx.clearRect(x,y,20,20);
    }
}

//清空画布
Draw.prototype.clearAll = function(){
    this.cvx.clearRect(0,0,this.cvs.clientWidth,this.cvs.clientHeight);
}

 

（3）然后HTML

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=http://www.mamicode.com/‘/stylesheets/style.css‘ />"600" height="600" id="cvs"></canvas>
    <button id="clear-all">清空画布</button>
    <button id="clear">橡皮擦</button>
    <script src="http://www.mamicode.com/javascripts/index.js"></script>
    <script>
      window.onload = function(){
        /**************画布id  清除画布id   橡皮擦id*****/
        new DrawElement(‘cvs‘,‘clear-all‘,‘clear‘).init();
      };
    </script>
  </body>
</html>

 

简单调试后得到以下效果

技术分享

 

我画你猜（一）


联系
我们