如何使用 WebGL 渲染按钮背景？

Question

Let's say that I have a GL shader I'd want to use as an HTML button background (it's a pretty animated gradient). How can I achieve that?

I can think of setting the background to a texture and rendering the shader to this texture. Is that fundamentally possible?

Answer 1

Using a canvas inside a button is the most logical way to go, note that this is just an example and not a shader, but we use the canvas to render WebGL so it can be slightly different for your case.

 var c = document.getElementsByTagName("canvas")[0]; var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "green"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, 400, 200);

 button { position: relative; background-color: transparent; border: none; outline: none; padding: 8px; } button > div { position: relative; z-index: 1; } canvas { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

 <button> <canvas></canvas> <div>Fancy Button</div> </button>