用canvas實現鼠標拖動繪製矩形框

時間 2019-12-10

標籤 canvas 實現鼠標拖動繪製矩形简体版

原文原文鏈接

須要用到jCanvas插件和jQuery。html

jCanvas下載:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.jsjquery

代碼以下：git

<!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>

效果大概以下：github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。