Question

我正在尝试使画布层图像响应画布背景图像，两者都显示出良好的响应行为，但我的问题是我想在屏幕中心修复图层图像是否有什么尺寸的屏幕。目前在重新调整我的图层图像时，开始改变其不受欢迎的位置。我想在屏幕中心固定图层图像

这是我的HTML代码

import numpy as np
from matplotlib import pyplot
from matplotlib import animation

n=int(raw_input("Enter the number of data points: "))
R=raw_input("Enter the radius of smaller circle: ")
R=float(R)

profile_data=open('profile_data.txt','r')
x=[0]*n
y=[0]*n
x_C=[0]*n
y_C=[0]*n
for i in range(n):
    temp=profile_data.readline()
    x[i],y[i]=temp.split()
    x[i]=float(x[i])
    y[i]=float(y[i])
profile_data.close()

fig=pyplot.figure()
ax=pyplot.axes(xlim=(-10,10),ylim=(-10,10))
curves,=ax.plot([], [],lw=2)

def init():
    curves.set_data([], [])
    return curves,

def animate(i):
    for j in range(360):
        x_C[j]=x[i]+R*np.cos(j*np.pi/180)
        y_C[j]=y[i]+R*np.sin(j*np.pi/180)
    curves.set_data(x_C, y_C)
    return curves,

anim = animation.FuncAnimation(fig, animate, init_func=init,frames=n, interval=20, blit=True)
pyplot.show()

这是我的css

<body id="body">

    <canvas id="myCanvas" style="position:relative;"></canvas>


    <img src="background.jpg" id="background" />
    <img src="s01.jpg" id="layer" />

这是我的js

#layer {
    position: fixed;
    top: 0px;
    margin-left: -160px;
}

img{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
    }

body {
        /*background: #E9E9E9;*/
        color: #333;
        font: 1em/1.3em "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
        text-shadow: rgba(255,255,255,0.8) 0 1px 0;
        text-align: center;
        overflow:hidden;
    }
    html, body {
        width:100%;
        height:100%;
        margin:0;
    }

我被困在这里最近3天，仍然无法弄清楚

Answer 1

我在脚本中找不到任何问题。写得很好。但您只需要应用此css规则将图层置于视口中心：

#layer {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

demo

如何相对于视口调整画布图像

1 个答案: