Question

无法在画布上获取此绘图应用的位置。错误状态xPos，yPos未定义。在画布上绘制但线条位置关闭。我错过了什么？您可以查看下面代码中的代码：

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 2;
var down = false;

function draw(e) {
  xPos = e.clientX - canvas.offsetLeft;
  yPos = e.clientY - canvas.offsetTop;

  if (down === true) {
    context.lineTo(xPos, yPos);
    context.stroke();
  }
}

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mousedown', function() {
  down = true;
  context.beginPath();
  context.moveTo(xPos, yPos);
  canvas.addEventListener("mousemove", draw);
});

canvas.addEventListener('mouseup', function() {
  down = false;
});

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 16px/1 sans-serif;
  font-family: 'Questrial', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
}
main,
li {
  display: block;
}
h1,
h2,
h3,
h4 {
  font-size: inherit;
}
strong {
  font-weight: bold;
}
a,
button {
  color: inherit;
  transition: .3s;
}
a {
  text-decoration: none;
}
button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:focus {
  outline: 0;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}
section {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 20px auto;
}
section #canvas {
  width: 800px;
  height: 500px;
  display: block;
  border: 1px solid black;
  margin: 10px auto 0px;
}
section #drawingTools {
  width: 800px;
  height: 80px;
  margin: 0 auto;
}
section #drawingTools #colors {
  width: 100%;
  height: 20px;
}
section #drawingTools #colors button {
  width: 20%;
  height: 20px;
  float: left;
}
section #drawingTools #colors button:hover {
  opacity: 0.5;
}
section #drawingTools #colors #black {
  background: black;
}
section #drawingTools #colors #white {
  background: white;
}
section #drawingTools #colors #red {
  background: red;
}
section #drawingTools #colors #green {
  background: green;
}
section #drawingTools #colors #blue {
  background: blue;
}
section #drawingTools #otherTools {
  width: 100%;
  height: 60px;
}
section #drawingTools #otherTools button {
  width: 100%;
  height: 50px;
  margin-top: 5px;
  background: #303030;
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 5px;
  cursor: pointer;
}
section #drawingTools #otherTools button:hover {
  font-size: 13px;
}

＆＃13;

<section>
  <div id="drawingTools">
    <div id="colors">
      <button id="black"></button>
      <button id="white"></button>
      <button id="red"></button>
      <button id="green"></button>
      <button id="blue"></button>
    </div>
    <div id="otherTools">
      <button id="clearCanvas">Clear Canvas</button>
    </div>
  </div>
  <canvas id="canvas"></canvas>
</section>

＆＃13;

Answer 1

您实际上正在缩放画布。

画布是嵌入的，不会考虑调整绘图功能的外部值，只考虑画布标记/＆gt; 本身附带的属性值。

section #canvas {
  //Remove width: 800px;
  //Remove height: 500px;
  display: block;
  border: 1px solid black;
  margin: 10px auto 0px;
}

做类似的事。

canvas.width = 800;
canvas.height = 500;
window.onresize = function onresize() {
    //canvas.width = window.innerWidth;//100%
    //canvas.height = window.innerHeight;//100%
}

在画布上的位置offsetTop＆amp; offsetLeft

1 个答案: