2.8.4_橡皮筋式的线条绘制

最新推荐文章于 2021-05-25 13:17:42 发布
信封中的阳光
最新推荐文章于 2021-05-25 13:17:42 发布
阅读量1.4k
点赞数
分类专栏： HTML5_CANVAS练习案例
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71078126
版权
HTML5_CANVAS练习案例专栏收录该内容
81 篇文章 1 订阅
订阅专栏
2.8.4_橡皮筋式的线条绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>橡皮筋式的线条绘制</title>
        <style>
            body{
                background: #eee;
            }
            #controls{
                position: absolute;
                left: 25px;
                top: 25px;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 10px;
                margin-top: 10px;
                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);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="400"></canvas>
        <div id="controls">
            线条的颜色：
            <select id="strokeStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            填充的颜色：
            <select id="fillStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            线宽：
            <select id="lineWidthSelect">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>
            填充：
            <input id="fillCheckbox" type="checkbox" checked />
            指示线：
            <input id="guidewireCheckbox" type="checkbox" checked />
            <input id="eraseAllButton" type="button" value="擦除全部线条" />
        </div>
    </body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            eraseAllButton = document.getElementById('eraseAllButton'),
            strokeStyleSelect = document.getElementById('strokeStyleSelect'),
            guidewireCheckbox = document.getElementById('guidewireCheckbox'),
            drawingSurfaceImageData,
            mousedown ={},
            rubberbandRect = {},
            dragging = false,
            guidewires = guidewireCheckbox.checked;

            //初始化
            context.strokeStyle = strokeStyleSelect.value;
            drawGrid('lightgray',10,10);

            canvas.onmousedown = function (e){
                var loc = windowToCanvas(e.clientX,e.clientY);

                e.preventDefault();
                saveDrawingSurface();

                mousedown.x = loc.x;
                mousedown.y = loc.y;
                dragging = true;

            }

            canvas.onmousemove = function(e){
                var loc;
                if(dragging){
                    e.preventDefault();
                    loc = windowToCanvas(e.clientX,e.clientY);
                    restoreDrawingSurface(); //相当于清空当前画的线
                    updateRubberband(loc);//绘制当前的线

                    if(guidewires){
                        drawGuidewires(loc.x,loc.y); //绘制指示线
                    }
                }
            }

            canvas.onmouseup = function (e){
                loc = windowToCanvas(e.clientX,e.clientY);
                restoreDrawingSurface();
                updateRubberband(loc);
                dragging = false;
            }

            //全部擦除线
            eraseAllButton.onclick = function(e){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawGrid('lightgray',10,10);
                saveDrawingSurface();
            }
            //是否显示指示线
            guidewireCheckbox.onchange = function(e){
                guidewires=guidewireCheckbox.checked;
            }
            //
            strokeStyleSelect.onchange = function(e){
                context.strokeStyle = strokeStyleSelect.value;
            }
            //绘制指示线
            function drawGuidewires(x,y){
                context.save();
                context.strokeStyle = 'rgba(0,0,230,0.4)';
                context.lineWidth = 0.5;
                drawVerticlLine(x);
                drawHorizontalLine(y);
                context.restore();
            }
            //绘制垂直指示线
            function drawVerticlLine(x){
                context.beginPath();
                context.moveTo(x+0.5,0);
                context.lineTo(x+0.5,context.canvas.height);
                context.stroke();
            }
            //绘制水平指示线
            function drawHorizontalLine(y){
                context.beginPath();
                context.moveTo(0,y+0.5);
                context.lineTo(context.canvas.width,y+0.5);
                context.stroke()
            }
            //更新橡皮筋线
            function updateRubberband(loc){
                updateRubberbandRectangle(loc); //监测画线所在的矩形
                drawRubberbandShape(loc); //画线
            }

            //监测画线所在的矩形
            function updateRubberbandRectangle(loc){
                rubberbandRect.width = Math.abs(loc.x-mousedown.x);
                rubberbandRect.height = Math.abs(loc.y-mousedown.y);

                if(loc.x>mousedown.x){
                    rubberbandRect.left = mousedown
                }else{
                    rubberbandRect.left = loc.x;
                }
                if(loc.y>mousedown.y){
                    rubberbandRect.top = mousedown.y;
                }else{
                    rubberbandRect.top = loc.y;
                }
            }
            //画线
            function drawRubberbandShape(loc){
                context.beginPath();
                context.moveTo(mousedown.x,mousedown.y);
                context.lineTo(loc.x,loc.y);
                context.stroke();
            }
            //得到鼠标在canvas画布中的坐标
            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)
                }
            }
            //保存画面
            function saveDrawingSurface(){
                drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
            }
            //恢复绘图表面
            function restoreDrawingSurface(){
                context.putImageData(drawingSurfaceImageData,0,0);
            }
            //绘制网格线
            function drawGrid(color,stepX,stepY){
                context.save();
                context.strokeStyle = color;
                context.lineWidth = 0.5;

                for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){
                    context.beginPath();
                    context.moveTo(i,0);
                    context.lineTo(i,context.canvas.height);
                    context.stroke();
                }

                for(var i = stepY+0.5;i<context.canvas.height;i+=stepY){
                    context.beginPath();
                    context.moveTo(0,i);
                    context.lineTo(context.canvas.width,i);
                    context.stroke();
                }
                context.restore();
            }
    </script>
</html>