2.9.2_橡皮筋辅助画圆

最新推荐文章于 2021-03-02 03:54:19 发布
信封中的阳光
最新推荐文章于 2021-03-02 03:54:19 发布
阅读量911
点赞数
分类专栏： HTML5_CANVAS练习案例
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71078173
版权
HTML5_CANVAS练习案例专栏收录该内容
81 篇文章 1 订阅
订阅专栏
2.9.2_橡皮筋辅助画圆

<!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="lineWidthStyleSelect">
                <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'),
            lineWidthStyleSelect = document.getElementById('lineWidthStyleSelect'),
            fillStyleSelect = document.getElementById('fillStyleSelect'),
            fillCheckbox = document.getElementById('fillCheckbox'),

            drawingSurfaceImageData,
            mousedown ={},
            rubberbandRect = {},
            dragging = false,
            guidewires = guidewireCheckbox.checked;
            fillColor= fillCheckbox.checked;

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

            //事件控制器
            canvas.onmousedown = function (e){
                var loc;
                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();
                    restoreDrawingSurface();
                    loc = windowToCanvas(e.clientX,e.clientY);
                    updateRubberband(loc);
                    if(guidewires){
                        drawGuidewires(loc.x,loc.y);
                    }
                }
            }
            canvas.onmouseup = function (e){
                var loc;

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

            strokeStyleSelect.onchange = function(){
                context.strokeStyle = strokeStyleSelect.value;
            }

            fillStyleSelect.onchange = function (){
                context.fillStyle = fillStyleSelect.value;
            }

            lineWidthStyleSelect.onchange = function(){
                context.lineWidth = lineWidthStyleSelect.value;
            }

            fillCheckbox.onchange = function(){
                fillColor= fillCheckbox.checked;
            }

            guidewireCheckbox.onchange = function(){
                guidewires = guidewireCheckbox.checked;
            }

            eraseAllButton.onclick = function(){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawGrid('lightgray',10,10);
            }
            //更新橡皮筋
            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.x;
                }else{
                    rubberbandRect.left = loc.x;
                }
                if(loc.y>mousedown.y){
                    rubberbandRect.top = mousedown.y;
                }else{
                    rubberbandRect.top = loc.y;
                }
            }
            //画圆
            function drawRubberbandShape(loc){
                var angle,
                    radius;
                if(loc.y == mousedown.y){  //在一线直线上画圆时，angle为0
                    radius = Math.abs(loc.x-mousedown.x);
                }else{
                    angle = Math.atan(rubberbandRect.height/rubberbandRect.width),
                    radius = rubberbandRect.height/Math.sin(angle);
                }
                context.beginPath();
                context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);
                context.stroke();
                if(fillColor){
                    context.fill();
                }
            }
            //画指示线
            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 saveDrawingSurface(){
                drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
            }
            //恢复画布
            function restoreDrawingSurface(){
                 context.putImageData(drawingSurfaceImageData,0,0);
            }
            //定位到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 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>