All geek questions in one place

Rectangular gradient with HTML5 canvas element

How to draw a rectangle with a gradient effect like the one shown below using an HTML5 canvas element?

sample

Edit: Thanks for the feedback. Yes, I have already tried many methods. For example, is it possible to use the createRadialGradient method, as @Loktar suggests? Here is a sample code:

 <html> <head> <title>test</title> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50); grad1.addColorStop(0, 'rgba(255, 252, 0, 1)'); grad1.addColorStop(1, 'rgba(68, 205, 37, 1)'); ctx.fillStyle = grad1; ctx.fillRect(0, 0, 100, 100); } </script> </head> <body onload="draw();"> <div> <canvas id="canvas" width="100" height="100"></canvas> </div> </body> </html>

But the result is not quite what I want:

result

This needs to be done easily using a method like PathGradientBrush provided by GDI +. I'm not sure if this is possible with an HTML5 canvas element.

+6
source share
1 answer

You can try using a combination of linear gradient and clipping. Demo The code:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var outerColor = 'rgba(68,205,37,1)'; var innerColor = 'rgba(255,252,0,1)'; var w = 200; var h = 50; canvas.width = w; canvas.height = h; function gradient(dir) { var grad = ctx.createLinearGradient(dir[0], dir[1], dir[2], dir[3]); grad.addColorStop(0, outerColor); grad.addColorStop(0.5, innerColor); grad.addColorStop(1.0, outerColor); return grad; } // idea: render background gradient and a clipped "bow" function background() { ctx.fillStyle = gradient([0, 0, 0, h]); ctx.fillRect(0, 0, w, h); } function bow() { ctx.save(); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(w, h); ctx.lineTo(w, 0); ctx.lineTo(0, h); ctx.clip(); ctx.fillStyle = gradient([0, 0, w, 0]); ctx.fillRect(0, 0, w, h); ctx.restore(); } background(); bow();
+4
source

Source: https://habr.com/ru/post/894870/

More articles:


All Articles