mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 04:57:45 +00:00
LibWeb: Add initial implementation of CRC2D.globalAlpha
Works for fills and strokes (using colors, gradients, or patterns), along with images. fill_rect() has been updated to use fill_path(), which allows it to easily transform the rect, and already supports opacity. Co-authored-by: MacDue <macdue@dueutil.tech>
This commit is contained in:
parent
ff5d530aa3
commit
45f86466bb
8 changed files with 150 additions and 39 deletions
57
Base/res/html/misc/canvas-global-alpha.html
Normal file
57
Base/res/html/misc/canvas-global-alpha.html
Normal file
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Canvas 2D global alpha test</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
color: #fff;
|
||||
}
|
||||
canvas {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
ctx = document.getElementById("foo").getContext("2d");
|
||||
|
||||
image = new Image(100, 100);
|
||||
image.onload = drawImage;
|
||||
image.src = "car.png";
|
||||
|
||||
function drawImage() {
|
||||
|
||||
ctx.drawImage(image, 0, 0, 400, 400);
|
||||
|
||||
}
|
||||
|
||||
var width = 200;
|
||||
var height = 100;
|
||||
|
||||
ctx.globalAlpha = 0.4;
|
||||
ctx.font = "100px serif";
|
||||
ctx.fillText("hello friends", 50, 90);
|
||||
|
||||
|
||||
for (var i = 0; i < 2; i++)
|
||||
{
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(10, 10, width, height);
|
||||
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.strokeStyle = 'blue';
|
||||
ctx.strokeRect(10, 10, width, height);
|
||||
|
||||
ctx.scale(0.5, 0.5);
|
||||
ctx.translate(10 + width * 2, 10 + height * 2);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="foo" width="1000" height="1000"></canvas>
|
||||
</body>
|
||||
</html>
|
|
@ -201,6 +201,7 @@
|
|||
<li><a href="canvas-path.html">canvas path house!</a></li>
|
||||
<li><a href="canvas-clip-path.html">canvas clip paths</a></li>
|
||||
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
|
||||
<li><a href="canvas-global-alpha.html">canvas globalAlpha</a></li>
|
||||
<li><a href="canvas-path2d.html">Path2D</a></li>
|
||||
<li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
|
||||
<li><h3>Wasm</h3></li>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue