如何在 Html5-canvas 上渲染 Vue 组件

Question

I would like to use an htmlcanvas a canvas as the background of a webpage and then have various Vuejs components rendered on top of it.

I am sure the information is out there I just don't know what to search.

Answer 1

You can style any element using CSS with position: absolute to overlay the element on top of the canvas.

 .container { position: relative; width: 300px; height: 300px; } .canvas { width: 300px; height: 300px; background-color: yellow; } .overlay { position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; background-color: orange; }

 <div class="container"> <canvas class="canvas"></canvas> <div class="overlay"> This is displayed on top of the canvas </div> </div>