用拖拽鼠标的方式在背景上互动式的画线

最终实现效果如下

image.png

创建一个Canvas画布，并定义画布的div 的stroke color 和Guide wires

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Drawing Lines</title>
    <style>
    body{
        background: #eee;
    }

    #controls{
        position: absolute;
        left : 25px ;
        top : 25px;
    }
    #canvas {
        background: #fff;
        cursor: pointer;
        margin-left: 10px;
    }
    </style>
</head>
<body>
    <canvas id ='canvas' width='600' height='400'>
        canvas not supported
    </canvas>

    <div id='cantrols'>
        Stroke color:<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>

    Guidewire:
    <input id = 'guidewireCheckbox' type='checkbox' checked/>
    <input id = 'eraseAllButton' type='button' value='Erase all'/>
    </div>

    <script src = 'pijin.js'></script>
</body>
</html>

JS文件


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,       //拖拽
    guidewire = guidewireCheckbox.checked;  //指导线

//functions ...........................................................

function drawGrid (color, stepx, stepy){
    //for a complete listing   获得完整的列表
}

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);
}

//rubber bands  橡皮筋............................................................
function updateRubberbandRectangle(loc){     //更新橡皮筋矩形
    rubberbandRect.width = Math.abs(loc.x -mousedown.x);   //Math.abs(x)返回该值的绝对值，
    rubberbandRect.height = Math.abs(loc.y - mousedown.y);  //  loc——通过行标签索引行数据

    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){    //更新橡皮筋形状
    context.beginPath();
    context.moveTo(mousedown.x, mousedown.y);
    context.lineTo(loc.x, loc.y);
    context.stroke();
}

function updateRubberband(loc){
    updateRubberbandRectangle(loc);
    drawRubberbandShape(loc);
}

//Guidewires 指导线..........................................
function drawHorizontalLine (y){
    context.beginPath();
    context.moveTo(0, y+0.5);
    context.lineTo(context.canvas.width, y+0.5);
    context.stroke();
}

function drawVerticalLine (x){
    context.beginPath();
    context.moveTo(x+0.5, 0);
    context.lineTo(x+0.5, context.canvas.height);
    context.stroke();
}

function drawGuidewires(x, y){
    context.save();
    context.strokeStyle = 'rgba(0. 0, 230, 0.4)';
    context.lineWidth = 0.5;
    drawVerticalLine(x);
    drawHorizontalLine(y);
    context.restore();
}

// canvas event handlers画布事件处理程序..........................
canvas.onmousedown = function (e){
    var loc = windowToCanvas(e.clientX,e.clientY);

    e.preventDefault();  //prevent cursor change防止光标改变
    saveDrawingSurface();
    mousedown.x = loc.x;
    mousedown.y = loc.y;
    dragging = true;
};

canvas.onmousemove = function (e){
    var loc;
    if(dragging){
        e.preventDefault();   //prevent selections防止选择

        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;
};

//controls event handlers ..........................................

eraseAllButton.onclick = function (e){
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid('lightgray', 10, 10);   //drawGrid(color网格线颜色，stepX是x轴的网格间距，stepY是y轴的网格间距
    saveDrawingSurface();
};

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

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

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