使用 HTML、CSS 和 JS 使图像在 canvas 绘图上水平和垂直居中

Question

Sorry if the title is vague, it was hard to figure out what to call this problem. I have a canvas and an image overlaying each other like this:

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function newLine(){ let value = (Math.floor(Math.random() * 100) + 1) * 0.06283185307179587; ctx.clearRect(0, 0, c.width, c.height); ctx.lineWidth = 10; ctx.strokeStyle = '#00FF00'; ctx.beginPath(); ctx.arc(100, 75, 55, 0, value); ctx.stroke(); } setInterval(()=>{ newLine() }, 100)

 img{ width: 100px; border-radius: 50px; position: absolute; left: 58px; top: 33px; }

 <img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img> <canvas id="myCanvas"></canvas>

This works, but when I go to add multiple, or add a div above them, because of the image's absolute position, the image ends up over the div, not the canvas. Here's an example illustrating my issues:

 var can = document.getElementsByClassName("canvas"); for (var i = 0; i < can.length; i++) { let c = can.item(i) var ctx = c.getContext("2d"); function newLine(){ let value = (Math.floor(Math.random() * 100) + 1) * 0.06283185307179587; ctx.clearRect(0, 0, c.width, c.height); ctx.lineWidth = 10; ctx.strokeStyle = '#00FF00'; ctx.beginPath(); ctx.arc(100, 75, 55, 0, value); ctx.stroke(); requestAnimationFrame(newLine) } newLine() }

 img{ width: 100px; border-radius: 50px; position: absolute; left: 58px; top: 33px; } div{ background-color: red; } canvas{ display: inline-block; }

 <div class="top"> <h1>Some text</h1> </div> <img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img> <canvas class="canvas"></canvas> <img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img> <canvas class="canvas"></canvas>

(If you could figure out why the first one doesn't play, that would be amazing also)

The issues are:

• The first canvas doesn't play
• The images (because it's position is absolute) are stacked up and not over the second canvas

Is it possible to do this but with relative positioning? Please let me know if this was a confusing question. Thanks

Answer 1

Avoid mixing images <img> and canvas, instead just draw the image inside the canvas with drawImage nothing special just a few more lines on JavaScript

Here is an example:
(And I also fixed your issue where the first one does not play)

 class Shape { constructor(ctx, width, height, image) { this.ctx = ctx; this.width = width; this.height = height; this.image = image; this.value = Math.random() * 5 this.inc = 0.03 } draw() { this.value += this.inc; if (this.value > 2 * Math.PI || this.value < 0.05) this.inc *= -1; this.ctx.clearRect(0, 0, this.width, this.height); // Draw centered round image this.ctx.beginPath(); this.ctx.drawImage(this.image, 50, 24, 100, 100); this.ctx.lineWidth = 50; this.ctx.strokeStyle = 'white'; this.ctx.arc(100, 75, 75, 0, 2 * Math.PI); this.ctx.stroke(); // Draw green progress bar this.ctx.beginPath(); this.ctx.lineWidth = 12; this.ctx.strokeStyle = '#00FF00'; this.ctx.arc(100, 75, 55, 0, this.value); this.ctx.stroke(); } } var can = document.getElementsByClassName("canvas"); var animations = [] function loop() { animations.forEach(anim => anim.draw()); requestAnimationFrame(loop) } var image = new Image(); image.src = "https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"; image.onload = imageLoaded; function imageLoaded() { for (var i = 0; i < can.length; i++) { let c = can.item(i) animations.push(new Shape(c.getContext("2d"), c.width, c.height, image)); } loop() }

 div { background-color: red; } canvas { display: inline-block; border: 1px solid gray; }

 <div class="top"> <h2>Some text</h2> </div> <canvas class="canvas" width=200></canvas> <canvas class="canvas" width=200></canvas>

Answer 2

There are two problems: positioning of the images above the canvases and only one canvas playing.

First positioning. The img is given position absolute. To find out where to position it the system goes back up the tree to find the first element it comes across that has a position set. It then positions the img relative to that.

The canvas is at the same level as the img so that doesn't influence the img's position, going back up the first thing it hits with a position is the body element (which is positioned by default) and so it puts the img slightly set off from the top of the page.

To remedy this we can put each pair of img/canvas into their own div and position that inline-block. The img will then be positioned relative to that div and so will be placed over the canvas as required.

Second only one canvas playing. The code within the newline function uses a c and ctx. These are not set within the function so it takes the last one that was set. In addition, requestAnimationFrame with its callback is called for each can.length times each time so you end up with more than one of these. They stack up. The browser gets 'confused' and (at least on my laptop) it ended up not responding.

To cure this, call requestAnimationFrame just once per 'cycle' and repaint all the canvases at the same call to the callback - so put the definition of c and ctx inside the for loop so every canvas is set up on each frame.

 var can = document.getElementsByClassName("canvas"); function newLine(){ for (var i = 0; i < can.length; i++) { let c = can.item(i) var ctx = c.getContext("2d"); let value = (Math.floor(Math.random() * 100) + 1) * 0.06283185307179587; ctx.clearRect(0, 0, c.width, c.height); ctx.lineWidth = 10; ctx.strokeStyle = '#00FF00'; ctx.beginPath(); ctx.arc(100, 75, 55, 0, value); ctx.stroke(); } requestAnimationFrame(newLine) } newLine()

 img{ width: 100px; border-radius: 50px; position: absolute; left: 58px; top: 33px; } div{ background-color: red; } canvas{ display: inline-block; }.wrapper { display: inline-block; position: relative; }

 <div class="top"> <h1>Some text</h1> </div> <div class="wrapper"> <:-- <img src="https.//media-exp1.licdn?com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127:e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img>--> <img src="https.//i.stack.imgur.com/ZBclx:jpg" /> <canvas class="canvas"></canvas> </div> <div class="wrapper"> <.-- <img src="https.//media-exp1?licdn:com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127.e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img>--> <img src="https.//i.stack.imgur.com/ZBclx.jpg" /> <canvas class="canvas"></canvas> </div>

Note, the actual logo image didn't show on your snippet - I guess it cannot be downloaded by just anybody - so I put it on imgur. The positioning is slightly off because the top and left positions had been previously set to compensate for its being positioned relative to the body. These need a bit of adjustment.

There is quite a lot of GPU being used (around 20% on my laptop, obviously that will differ depending on the user's equipment). It might be worth investigating whether a CSS animation could be used instead of having to redraw several canvases on each frame.

The animated canvases are very flickery. I don't know whether this is intended or whether it was just a test, but they may be upsetting for those with conditions such as epilepsy.