system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 10:36:24 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Base: Add a radial gradient with transparent end stops canvas demo

Browse source
This commit is contained in:
MacDue 2023-01-23 00:44:14 +00:00 committed by Linus Groh
parent a43d892c4e
commit 8272cfc9f3
1 changed files with 40 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
Base/res/html/misc/canvas-gradients.html
View file

@ -2,7 +2,9 @@
<h1>Canvas Gradients</h1>
<h2>Radial Gradients</h2>
<em>MDN example</em><br>
<canvas id="mdnRadial" width="200" height="200"></canvas>
<canvas id="mdnRadial" width="200" height="200"></canvas><br>
<em>Balls (transparent end stops)</em><br>
<canvas id = "balls"></canvas>
<h3>Interactive Radial Gradients (mouse over)</h3>
<hr>
<em>A radial gradient</em><br>
@ -34,7 +36,44 @@
ctx.fillRect(20, 20, 160, 160);
}
</script>
<script>
{
const canvas = document.getElementById('balls');
var ctx = canvas.getContext('2d');
const radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
const radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
const radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
const radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
}
</script>
<script>
// Interactive radial gradients... The MacDue debugging experience live!