Fatal编程技术网
  • javascript/
  • Javascript 如何在图像顶部按比例安装不同的画布？

Javascript 如何在图像顶部按比例安装不同的画布？

javascript html html5-canvas

Javascript 如何在图像顶部按比例安装不同的画布？,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,对于一个项目来说，我这里的主题非常直截了当 我看到了很多关于将图像调整到画布的主题。。。但我想做的恰恰相反 我有一个模板图像是不会改变的，除非它是一个不同的屏幕大小。然而；我想让画布形式的图像适合模板图像尺寸。我想把模板想象成一个容器，但因为我将使用不同尺寸的不同图像，所以它有点复杂 我试图使画布元素中创建的图像与#tee元素的尺寸成比例地匹配，而不管其大小如何 <body> <div id="obj-container"> <canvas id="obj">

对于一个项目来说，我这里的主题非常直截了当

我看到了很多关于将图像调整到画布的主题。。。但我想做的恰恰相反

我有一个模板图像是不会改变的，除非它是一个不同的屏幕大小。然而；我想让画布形式的图像适合模板图像尺寸。我想把模板想象成一个容器，但因为我将使用不同尺寸的不同图像，所以它有点复杂

我试图使画布元素中创建的图像与#tee元素的尺寸成比例地匹配，而不管其大小如何

<body>
<div id="obj-container">
<canvas id="obj"></canvas>
<img id="tee" src="https://doc-04-6s-docs.googleusercontent.com/docs/securesc/qhq5e6giuhl9ifpegip5ens14q2k3js8/8krn1u04pvhor8f561eg93ipbn8hjh2e/1569607200000/16313464075852650790/11150445017567734732/0B3ubyt3iIvkaUlpHVEpDTGhjQzg?e=view"></img></div>

下面是Codepen上的一个实际示例

您希望画布大小保持其纵横比/比例，但缩放以适合T恤图像的大小吗？你想让它们重叠吗？是的，T恤图像的内在尺寸是2400 x 1800（将其视为一个容器类型的元素）——但我试图使画布与该图像（T恤图像）（视觉上）成比例地匹配，而不是字面上的匹配。