等艺来绵阳 发布于 2017-04-29 18:14

在画布中画画的时候,画笔不能与鼠标的X,Y坐标相同
js代码

window.onload=function(){
    var ocanvas=document.getElementById('canvas');
    var ocolor=document.getElementById('color');
    var obrushSize=document.getElementById('brushSize');
    var ocontrol=document.getElementById('control');
    var omakeImage=document.getElementById('makeImage');
    new Canvas(ocanvas,ocolor,obrushSize,ocontrol,omakeImage);
}
function Canvas(){
    //把new canvas中的参数传递到init这个父类中的方法上去
    this.init.apply(this,arguments);
}
Canvas.prototype={
    preArray:[],//用于上一步所用
    midArray:[],//用户存放当前的图像
    nextArray:[],//用于下一步所用
    array_paint:[],
    config:{
        lineWidth:1,
        lineColor:"red",
        shadowBlur:2

    },
    init:function(oCanvas,oColor,oBrushSize,oControl,oMakeImage){
        //alert(1);
        this.canvas=oCanvas;
        this.context=oCanvas.getContext('2d');
        this.color=oColor;
        this.brushSize=oBrushSize;
        this.control=oControl;
        this.makeImage=oMakeImage;
        this.initDraw();
        this.Draw(oCanvas);
        //this.setDrawStyle();
    },
    initDraw:function(){
        var data=this.context.getImageData(0,0,600,500);
        this.midArray.push(data);
    },
    Draw:function(canvas){
        var _this=this;
        //e当前事件的句柄
        canvas.onmousedown=function(e){
             var x=e.offsetX;
             var   y=e.offsetY;
                //left=this.parentNode.offsetLeft,
                //top=this.parentNode.offsetTop,
                canvasX=x,
                canvasY=y;
                //_this.setDrawStyle();
                _this.context.beginPath();
                _this.context.moveTo(canvasX, canvasY);
                var preData=_this.context.getImageData(0,0,600,500);
                _this.preArray.push(preData);
                canvas.onmousemove=function(e){
                    var x1=e.offsetX,
                        y1=e.offsetY,
                        canvasX1=x1;
                        canvasY1=y1;
                        if(e.target==_this.canvas){
                            _this.context.lineTo(canvasX1,canvasY1);
                            _this.context.stroke();
                        }else{
                            //_this.context.beginPath();
                        }
                    }
        };

    },
    setDrawStyle:function(){
        this.context.lineWidth=this.config.lineWidth;
        this.context.strokeStyle=this.config.lineColor;
        this.context.shadowColor=this.config.lineColor;
        this.context.shadowBlur=this.config.shadowBlur;
    }
    
};

css代码:

*{
    margin:0px;
    padding:0px;
    font-size:16px;
    font-weight:bold;
}
.wrap{
    width:804px;
    height:500px;
    border:1px solid black;
    margin:20px auto;
}
#canvas{
    float:left;
    width:600px;
    height:500px;
    border:1px solid black;
}
#canvas:hover{
    cursor:crosshair;
}
.imagep{
    float:right;
    width:200px;
    height:500px;
    border:1px solid black;
}
#color h5{
    margin-left:20px;
    margin-top: 10px;
}
#color ul li{
    list-style:none;
    width:35px;
    height:35px;
    margin:10px;
    float:left;
    cursor:pointer;
    border:3px solid black;
}
#brushSize{
    display:block;
    margin:10px;
    cursor:pointer;
    
}
#brushSize p{
    width:10px;
    height:10px;
    margin-left:20px;
    margin-top: 15px;
    cursor:pointer;
    background:url(image/brush.png);
    float:left;
}
#brushSize h5{
    margin-left:10px;
    margin-top: 30px;
    display:block;
}

#brushSize .smallBrush{
    background-position:-6px -6px;
}
#brushSize .middleBrush{
    background-position:-31px -6px;
}
#brushSize .largeBrush{
    background-position:-54px -6px;
}
#control h5{
    margin-top:30px;
    margin-left:20px;
}
#control p{
    margin-top:20px;
    margin-left:30px;
    width:20px;
    height:15px;
    float:left;
    background:url(image/icon.png);
    cursor:pointer;
}
#control .return-control{
    background-position:-2px -148px;
}
#control .next-control{
    background-position:-2px -168px;
}
#control .clearBoth{
    background-position:-2px -188px;
}
#makeImage{
    margin-top:20px;
    margin-left:10px;
}
#control .return-control:hover{
    /*background-position:-2px -168px;*/
    background-position:-2px -208px;    
}
#control .next-control:hover{
    background-position:-2px -228px;
}
#control .clearBoth:hover{
    background-position:-2px -251px;
}




HTML代码




    
    canvas实现涂鸦效果
    
    


浏览器不支持canvas,请跟换浏览器

画笔颜色

画笔大小

相关操作

各位大神知道的请告诉一下,不胜感激

1 个回答
  • 代闓发票有需要请联系我手机微信13640241413
    回答问题...

    2020-04-01 16:23 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
活跃用户
  • 1
    问道摩托
  • 2
    袁广龙976丶
  • 3
    逍遥子
  • 4
    亮仔
  • 5
    芙蓉花
  • 6
    作小die_syj
  • 7
    王丽珠景平怡伦_621
  • 8
    adfa3sd5f6a
  • 9
    欣欣大妮
  • 10
    sfasfs
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有