用canvas实现鼠标拖动绘制矩形框

Posted 木西梧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用canvas实现鼠标拖动绘制矩形框相关的知识，希望对你有一定的参考价值。

需要用到jCanvas插件和jQuery。

jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.js

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动绘制矩形框(canvas)</title>
</head>
<body>

<canvas id="canvas" width="600" height="300" style="border: 1px solid #000;"></canvas>

<script src="./jquery-1.11.3.min.js"></script>
<script src="./jcanvas.min.js"></script>
<script>
    var layer=0;
    CanvasExt = {
        drawRect:function(canvasId,penColor,strokeWidth){
            var that=this;
            that.penColor=penColor;
            that.penWidth=strokeWidth;

            var canvas=document.getElementById(canvasId);
            //canvas 的矩形框
            var canvasRect = canvas.getBoundingClientRect();
            //矩形框的左上角坐标
            var canvasLeft=canvasRect.left;
            var canvasTop=canvasRect.top;

            var layerIndex=layer;
            var layerName="layer";
            var x=0;
            var y=0;

            //鼠标点击按下事件，画图准备
            canvas.onmousedown=function(e){
                //设置画笔颜色和宽度
                var color=that.penColor;
                var penWidth=that.penWidth;

                layerIndex++;
                layer++;
                layerName+=layerIndex;
                x = e.clientX-canvasLeft;
                y = e.clientY-canvasTop;

                $("#"+canvasId).addLayer({
                    type: \'rectangle\',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: 1,
                    height: 1
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
                //鼠标移动事件，画图
                canvas.onmousemove=function(e){
                    width = e.clientX-canvasLeft-x;
                    height = e.clientY-canvasTop-y;

                    $("#"+canvasId).removeLayer(layerName);

                    $("#"+canvasId).addLayer({
                        type: \'rectangle\',
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name:layerName,
                        fromCenter: false,
                        x: x, y: y,
                        width: width,
                        height: height
                    });

                    $("#"+canvasId).drawLayers();
                }
            };

            canvas.onmouseup=function(e){

                var color=that.penColor;
                var penWidth=that.penWidth;

                canvas.onmousemove=null;

                width = e.clientX-canvasLeft-x;
                height = e.clientY-canvasTop-y;

                $("#"+canvasId).removeLayer(layerName);

                $("#"+canvasId).addLayer({
                    type: \'rectangle\',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
            }
        }
    };

    drawPen();
    function drawPen(){
        var color = "red";
        var width = 1;
        CanvasExt.drawRect("canvas",color,width);
    }

</script>
</body>
</html>

效果大概如下：

以上是关于用canvas实现鼠标拖动绘制矩形框的主要内容，如果未能解决你的问题，请参考以下文章

OpenGL用鼠标拖动绘制矩形？

WPF 实现拖动工具箱效果

canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转

使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）

实现鼠标拖动canvas绘制的图片

HTML5 Canvas 如何填充鼠标绘制的三角形