黑白滤镜切换-优快云博客

本文介绍了一个简单的HTML页面，该页面包含一个可以切换显示彩色或黑白图像的画布。通过使用JavaScript，用户可以通过勾选复选框来应用黑白滤镜。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.5.2.3_黑白滤镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>黑白滤镜</title>
        <style>
            body{
                background: #eee;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 20px;
                margin-top: 50px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            #controls{
                position: absolute;
                top: 20px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div id="controls"><input type="checkbox" id="colorToggleCheckbox" />黑白滤镜</div>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var colorToggleCheckbox = document.getElementById('colorToggleCheckbox');

        var image = new Image();


        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            drawInColor()
        }

        colorToggleCheckbox.onclick = function(){
            if(colorToggleCheckbox.checked){
                drawInBlackAndWhite();
            }else{
                drawInColor();
            }
        }
        //绘制彩色图像
        function drawInColor(){
            context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
        }
        //绘制黑白图像
        function drawInBlackAndWhite(){
            var imageData = context.getImageData(0,0,canvas.width,canvas.height);
            var data = imageData.data;

            for(var i=0;i<data.length-4;i+=4){
                average = (data[i]+data[i+1]+data[i+2])/3;
                data[i] = average;
                data[i+1] = average;
                data[i+2] = average;
            }
            context.putImageData(imageData,0,0)
        }
    </script>
</html>