使用HTML5画布（Canvas）模拟图层（Layers）效果

作者：System 时间：2024年08月09日分类：所有,html5 字数：1261




<!DOCTYPE html>
<html>
<head>
    <title>Canvas Layers Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
 
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
 
        // 模拟绘制图层的函数
        function drawLayer(layerId, color) {
            ctx.save(); // 保存当前状态
            ctx.globalAlpha = layerId / 10; // 设置透明度
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, canvas.width, canvas.height); // 在图层上绘制矩形
            ctx.restore(); // 恢复之前保存的状态
        }
 
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
        // 绘制图层
        drawLayer(1, 'red');
        drawLayer(2, 'blue');
        drawLayer(3, 'green');
        drawLayer(4, 'yellow');
        drawLayer(5, 'purple');
        drawLayer(6, 'orange');
        drawLayer(7, 'pink');
        drawLayer(8, 'brown');
        drawLayer(9, 'grey');
        drawLayer(10, 'cyan');
    </script>
</body>
</html>

这段代码演示了如何使用HTML5画布来模拟图层效果。每次调用drawLayer函数时，都会创建一个新图层，并设置其透明度，然后在该图层上绘制一个颜色矩形。通过save()和restore()方法，保存和恢复状态，确保每个图层之间的绘制互不影响。

使用HTML5画布（Canvas）模拟图层（Layers）效果

评论已关闭

推荐阅读