是否有可能在Canvas中获取canvas是css固定元素的位置？

Question

现在我设置位置：绝对;在css中它给出：

Uncaught TypeError: Cannot read property 'x' of undefined
    at HTMLCanvasElement.getColor

当position：absolute;但我需要Canvas处于固定位置。

我的findPos（）函数获取对象的位置：

function findPos(obj) {
  var curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

请检查我的代码小提琴：https://jsfiddle.net/ds6kug6r/8/

Answer 1

这是因为根据the specs（2.1），固定定位元素没有offsetParent元素。

但是你无论如何都不需要它，而是使用不受填充边缘问题影响的Element.getBoundingClientRect()。

function getColor(e) {
  // getBoundingClientRect to retrieve the position of our canvas in the doc
  var rect = this.getBoundingClientRect();
  // we also need to use clientX and clientY values now
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  var coord = "x=" + x + ", y=" + y;
  var c = this.getContext('2d');
  var p = c.getImageData(x, y, 1, 1).data;
  log(p);
}


/* Color Wheel */
var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var counterClockwise = false;

for (var angle = 0; angle <= 360; angle += 1) {
  var startAngle = (angle - 2) * Math.PI / 180;
  var endAngle = angle * Math.PI / 180;
  context.beginPath();
  context.moveTo(x, y);
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, 'hsl(' + angle + ', 10%, 100%)');
  gradient.addColorStop(1, 'hsl(' + angle + ', 100%, 50%)');
  context.fillStyle = gradient;
  context.fill();
}


document.getElementById("picker").addEventListener("click", getColor);


function log(m) {
  document.getElementById("viz").style.backgroundColor = 'rgba(' + m + ')';
  document.getElementById("log").append(m + '\n')
}

canvas {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}

#viz {
  display: inline-block;
  height: 20px;
  width: 20px;
}

<canvas class="colorWheel" id="picker" width="200" height="200"></canvas>

<div>
  Log: <span id="viz"></span>
  <pre id="log"></pre>
</div>