4.5.2_带有透明度特效的橡皮筋式选取框

最新推荐文章于 2019-09-07 00:01:44 发布

信封中的阳光

最新推荐文章于 2019-09-07 00:01:44 发布

阅读量645

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71722887

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

4.5.2_带有透明度特效的橡皮筋式选取框

<!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="button" id="resetBtn" value="重置" /></div>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var resetBtn = document.getElementById('resetBtn');

        var image = new Image();
        var imageData;
        var imageDataCopy = context.createImageData(canvas.width,canvas.height);
        var mousedown ={};
        var rubberbandRectangle = {};
        var dragging = false;

        //初始化
        context.strokeStyle = 'navy';
        context.lineWidth = 1;

        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }
        //事件控制器
        resetBtn.onclick = function (){
            context.clearRect(0,0,canvas.width,canvas.height);
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }

        canvas.onmousedown = function(e){
            var loc = windowToCanvas(e.clientX,e.clientY);
            e.preventDefault();
            rubberbandStar(loc.x,loc.y);
        }
        canvas.onmouseup = function(){
            rubberbandEnd();
        }
        canvas.onmousemove = function (e){
            var loc;
            if(dragging){
                loc = windowToCanvas(e.clientX,e.clientY);
                rubberbandStretch(loc.x,loc.y);
            }
        }
        function rubberbandStar(x,y){
            mousedown.x = x;
            mousedown.y = y;
            dragging = true;
            captureRubberbandPixels();
        }
        function rubberbandStretch(x,y){
            if(rubberbandRectangle.width>2*context.lineWidth&&rubberbandRectangle.height>2*context.lineWidth){
                if(imageData !== undefined){
                    restoreRubberbandPixels();
                }
            }
            setRubberbandRectangle(x,y);
            if(rubberbandRectangle.width>2*context.lineWidth&&rubberbandRectangle.height>2*context.lineWidth){
                drawRubberband();
            }
        }
        function rubberbandEnd(){
            context.putImageData(imageData,0,0);
            context.drawImage(canvas,rubberbandRectangle.left+2*context.lineWidth,
                rubberbandRectangle.top+2*context.lineWidth,
                rubberbandRectangle.width-4*context.lineWidth,
                rubberbandRectangle.height - 4*context.lineWidth,
                0,0,canvas.width,canvas.height);
                dragging = false;
                imageData = undefined;
        }
        //设置矩形
        function setRubberbandRectangle(x,y){
            rubberbandRectangle.left = Math.min(x,mousedown.x);
            rubberbandRectangle.top = Math.min(y,mousedown.y);
            rubberbandRectangle.width = Math.abs(x - mousedown.x);
            rubberbandRectangle.height = Math.abs(y - mousedown.y);
        }
        function drawRubberband(){
            context.strokeRect(rubberbandRectangle.left+context.lineWidth,
                                rubberbandRectangle.top+context.lineWidth,
                                rubberbandRectangle.width-2*context.lineWidth,
                                rubberbandRectangle.height - 2*context.lineWidth);

        }
        function restoreRubberbandPixels(){
            var deviceWidthOverCSSPixels = imageData.width/canvas.width;
            var deviceHeightOverCSSPixels = imageData.height/canvas.height;
            //恢复原有的图像像素
            context.putImageData(imageData,0,0);
            //加入半透明区域
             context.putImageData(imageDataCopy,0,0,
                rubberbandRectangle.left,
                rubberbandRectangle.top,
                rubberbandRectangle.width*deviceWidthOverCSSPixels,
                rubberbandRectangle.height*deviceHeightOverCSSPixels);
        }
        //获取
        function captureRubberbandPixels(){
            imageData = context.getImageData(0,0,canvas.width,canvas.height);
            copyCanvasPixels();
        }
        //保存透明度降低一半的
        function copyCanvasPixels(){
            for(var i = 0; i<3;i++){
                imageDataCopy.data[i] = imageData.data[i];
            }
            for(var i=3; i<imageData.data.length-4;i+=4){
                imageDataCopy.data[i] = imageData.data[i]/2; //透明度
                imageDataCopy.data[i+1] = imageData.data[i+1]; //红
                imageDataCopy.data[i+2] = imageData.data[i+2]; //绿
                imageDataCopy.data[i+3] = imageData.data[i+3]; //蓝
            }
        }
        //转换坐标
        function windowToCanvas(x,y){
            var bbox = canvas.getBoundingClientRect();
            return {
                x:x-bbox.left*(canvas.width/bbox.width),
                y:y-bbox.top*(canvas.height/bbox.height)
            };
        }
    </script>
</html>