Question

首次发布一个问题，我在前面宣称我的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代码确定图像的位置和大小，并设置画布以匹配。然后画在画布上（目前，左上角是一个可爱优雅的方块）。

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

为画布指定'position：absolute'，画布不会移动（不出所料;我认为这绝对意味着什么）。因此图像和画布不会保持对齐。

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

我的直觉是这应该是可能的（简单，均匀），而我缺乏知识导致我不去看它。

Answer 1

我想我就是这样。

将画布放在 div 中。将 img 包装在 div 容器中。为内部 div 指定＆＃39; position：relative＆＃39; ，为内部＆＃39;位置：绝对＆＃39; 的 DIV 即可。这样，包含画布的 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>

Answer 2

如何将画布直接放在img上，使容器水平居中。

将画布直接放在图像上

将#conubiner中的#audubon_image和#myCanvas设置为position:absolute，并设置为position:relative。

将容器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

将＃容器的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。高度设置（浏览器上的羞耻！）。所以在制作中，你可能会在防守方面＆＃34;将javascript包装在1秒的setTimeout内以确保图像的宽度和宽度为1秒。高度已经设定。

完整代码和演示：

＆＃13;

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;

});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

试图对齐图像和画布

2 个答案: