Question

我使用canvas HTML5标签和JavaScript创建了一个简单的Web应用程序，允许沿着线条绘制鼠标在按下时移动。当我不使用任何CSS格式时，这工作正常。但是，当我使用CSS格式时，这不能正常工作：线条被绘制得远离鼠标所在的位置。

userid*, character*, rank
  1      guardian      0    
  1      mage          1 
  1      assassin      1   
  1      hunter        0

* = (component of) PRIMARY KEY

context = document.getElementById('drawing').getContext("2d");
//below code to ensure compatibility with older browser by check if addEventListener is available or not
var EventUtil = {
addHandler: function(element, type, handler){ if (element.addEventListener){
            element.addEventListener(type, handler, false);
            } else if (element.attachEvent){
            element.attachEvent('on' + type, handler);
            } else {
            element['on' + type] = handler; }
            },

removeHandler: function(element, type, handler){ if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
            } else if (element.detachEvent){
            element.detachEvent('on' + type, handler);
            } else {
            element['on' + type] = null; }
            }
} ;

//Drawing canvas related functions
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}
function whenMousedown () {
        var mouseX = event.pageX - this.offsetLeft;
        var mouseY = event.pageY - this.offsetTop;
         paint = true;
         addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
         redraw();
};
function whenMousemove (){
        if(paint){
          addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
          redraw();
        }
};

function whenMouseup(){
  paint = false;
};
function whenMouseleave(){
  paint = false;
};

function redraw(){
          context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

          context.strokeStyle = "#df4b26";
          context.lineJoin = "round";
          context.lineWidth = 5;

          for(var i=0; i < clickX.length; i++) {
            context.beginPath();
            if(clickDrag[i] && i){
              context.moveTo(clickX[i-1], clickY[i-1]);
             }else{
               context.moveTo(clickX[i]-1, clickY[i]);
             }
             context.lineTo(clickX[i], clickY[i]);
             context.closePath();
             context.stroke();
  }
}
// this clears the canvas and sets the arrays to null
function clearCanvas() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height) // Clears the canvas
  clickX = [];
  clickY = [];
  clickDrag = [];
};

EventUtil.addHandler (document.getElementById('drawing'), 'mousedown', whenMousedown);
EventUtil.addHandler (document.getElementById('drawing'), 'mousemove', whenMousemove);
EventUtil.addHandler (document.getElementById('drawing'), 'mouseup', whenMouseup);
EventUtil.addHandler (document.getElementById('drawing'), 'mouseleave', whenMouseleave);
EventUtil.addHandler(document.getElementById('clearBtn'), 'click', clearCanvas) ;

#container{
		margin: auto;
		width: 800px;
		height: 605px;
		border: 1px solid;
	}
#body {
		margin: 10px;
	}
.heading {
		margin: auto;
		width: 455px;
    color: blue;
    padding-bottom: 10px;
}
#drawing {
		width: 780px;
		height: 500px;
		border: 1px solid;
		margin: auto;
	}
#clearBtnDiv{
    margin: auto;
    width:80px;
}
#clearBtn{
    color: purple;
    font-size: large;
    background-color: aqua;
    width: 80px;
}

Answer 1

这是因为你没有计算offsetTop和offsetLeft的所有offsetParent元素。 offsetLeft / Top仅将左边框的偏移像素返回到其第一个父级，但是您的#drawing画布将＃body和#container以及元素作为父级，当您设置边距以使它们居中时，您还需要添加这些边距和鼠标事件的边框，因为您使用page.x作为基础。

如果使用CSS格式，Canvas标签不起作用

1 个答案: