试图对齐图像和画布答案

【问题标题】：Trying to align image and canvas试图对齐图像和画布
【发布时间】：2015-04-16 20:48:27
【问题描述】：

第一次发布问题，我预先声明我的 HTML/CSS/Javascript 知识是……我们应该说是杂乱无章的。我通常会做到，但我似乎无法弄清楚这一点。

我想要做的就是显示一个居中的图像。然后创建一个画布，将画布放在图像上，然后在其上绘图。然后在调整浏览器大小时让画布与图像保持一致。这是我到目前为止所拥有的（我承认，我从另一张海报中获得了很多 Javascript 代码，我正在尝试将其用作学习示例）：

<!DOCTYPE html>
<html>

<head>
<script>
    function myInit()
    {
    hdc = set_canvas();
    hdc.fillRect(0, 0, 50, 50);
    }

    function set_canvas()
    {
      var img = document.getElementById('audubon_image');
      var x = img.offsetLeft,
          y = img.offsetTop,
          w = img.clientWidth,
          h = img.clientHeight;
      var c = document.getElementById('myCanvas');
      img.parentNode.appendChild(c);
      c.style.zIndex = 1;
      c.style.left = x + 'px';
      c.style.top = y + 'px';
      c.setAttribute('width', w+'px');
      c.setAttribute('height', h+'px');
      hdc = c.getContext('2d');
      return(hdc);
    }
</script>

<style>
#container
{
    text-align: center;
}
canvas
{
    pointer-events: none;
    position: absolute;
    border: 1px solid black;
}
</style>
</head>

<body onload='myInit()'>
    <div id="container">
    <img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
    <canvas id='myCanvas'></canvas>     <!-- gets re-positioned in myInit(); -->
    </div>
</body>
</html>

应该发生什么：图像被放置。然后 Javascript 代码确定图像的位置和大小，并将画布设置为匹配。然后在画布上绘制（目前，左上角有一个可爱优雅的方块）。

到目前为止，一切都很好。但是由于图像居中，如果重新调整浏览器的大小（特别是变宽或变窄），图像的位置会相对于浏览器窗口的左右边缘移动。

为画布指定“位置：绝对”后，画布不会移动（不出所料；我想这就是绝对的意思）。所以图像和画布不会保持对齐。

如果我将画布 CSS 更改为“位置：相对”，那么当我重新调整窗口大小时，图像和画布相对于彼此保持在相同的位置（这是我想要的）。但是我无法将画布放在图像的顶部。

我的直觉是这应该是可能的（容易，甚至），我缺乏知识导致我看不到它。

【问题讨论】：

标签： image canvas alignment

【解决方案1】：

我想我已经开始了。

将 canvas 放在 div 中。将它和 img 包装在容器 div 中。为外部 div 指定 'position: relative'，为内部 div 指定 'position: absolute'。这样，包含 canvas 的 div 的 x 和 y 坐标可以简单地指定为 (0,0)。

<!DOCTYPE html>
<html>

<head>
<script>
    function myInit()
    {
    hdc = set_canvas();
    hdc.fillRect(0, 0, 50, 50);
    }

    function set_canvas()
    {
    var c = document.getElementById('map_canvas');
    c.style.zIndex = 1;
    c.setAttribute('width', '650px');
    c.setAttribute('height', '300px');
    hdc = c.getContext('2d');
    return(hdc);
    }
</script>
<style>
    #image_container
    {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
    position: relative;
    }
    #canvas_container
    {
    position: absolute;
    top: 0px;
    left: 0px;
    }
    #map_canvas
    {
    }
</style>
</head>

<body onload='myInit()'>
    <div id="image_container">
    <img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
    <div id="canvas_container">
        <canvas id="map_canvas"></canvas>
    </div>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

如何在容器水平居中的情况下将画布直接放置在 img 上。

将画布直接放在图像上方

在设置为position:relative 的#container 中将#audubon_image 和#myCanvas 都设置为position:absolute。

将容器 div 居中

margin:0 auto; 将#container 在页面上居中。

CSS

#container{
    margin:0 auto;
    position:relative;
    border:1px solid blue;
}
#audubon_image,#myCanvas{position:absolute; top:0px; left:0px;}
#audubon_image{border:1px solid green;}
#myCanvas{ border:1px solid red;}

Javascript

将#container 的CSS 大小和#canvas 的元素大小设置为等于img 的大小。请务必设置画布元素大小（不是 css 大小），否则您的画布绘图会失真。

// get a reference to #audubon_image
var img=document.getElementById('audubon_image');

// set #container's size to equal the #audubon_image size
var container=document.getElementById('container');
container.style.width=img.width+'px';
container.style.height=img.height+'px';

// set #myCanvas's size to equal the #audubon_image size
var canvas=document.getElementById('myCanvas');
canvas.width=img.width;
canvas.height=img.height;

注意：偶尔，浏览器会在图像的宽度和高度设置之前触发window.onload（为您的浏览器感到羞耻！）。因此，在生产中，您可能会“防御性地”将 javascript 包装在 1 秒的 setTimeout 内，以确保已设置图像的宽度和高度。

完整代码和演示：

window.onload = (function() {

  // get a reference to #audubon_image
  var img = document.getElementById('audubon_image');

  // set #container's size to equal the #audubon_image size
  var container = document.getElementById('container');
  container.style.width = img.width + 'px';
  container.style.height = img.height + 'px';

  // set #myCanvas's size to equal the #audubon_image size
  var canvas = document.getElementById('myCanvas');
  canvas.width = img.width;
  canvas.height = img.height;

});

body {
  background-color: ivory;
}
#container {
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
#audubon_image,
#myCanvas {
  position: absolute;
  top: 0px;
  left: 0px;
}
#audubon_image {
  border: 1px solid green;
}
#myCanvas {
  border: 1px solid red;
}

<div id="container">
  <img id="audubon_image" src='https://dl.dropboxusercontent.com/u/139992952/multple/character3.png' />
  <canvas id='myCanvas'></canvas>
</div>

【讨论】：