需要用到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实现鼠标拖动绘制矩形框的更多相关文章

  1. C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  2. canvas实现鼠标拖拽矩形移动改变大小

    项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...

  3. Opencv在视频中静态、动态方式绘制矩形框ROI

    Opencv视频处理中的目标跟踪经常用到要在视频上画一个矩形框ROI,标注出要跟踪的物体,这里介绍两种在视频中绘制矩形框的方法,一种是"静态的",一种是"动态的" ...

  4. CAD交互绘制矩形框（网页版）

    主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE ...

  5. CAD交互绘制矩形框（com接口）

    主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE ...

  6. Skyline实现橡皮筋效果绘制矩形框

    这种类似于框选的效果用的比较普遍,一般三维平台和GIS平台都提供了支持接口,可是Skyline就是这么傲娇! 思路是这样的:绘制出的矩形框应该是一直与屏幕边框平行的,也就是矩形框的实际旋转角度是等于摄 ...

  7. 如何用 matlab 在图片上绘制矩形框 和 添加文字 ？

    如何给图像添加矩形框?以及添加想要输入的文字 ? 案例程序,如下所示: clc; close all; clear all;image = imread('/home/wangxiao/Picture ...

  8. opencv::轮廓周围绘制矩形框和圆形框

    基于RDP算法实现,目的是减少多边形轮廓点数 approxPolyDP(InputArray curve, OutputArray approxCurve, double epsilon, bool ...

  9. canvas 实现鼠标画出矩形

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...

随机推荐

  1. XML 对xml文件的crud的增加 create操作 增加元素 增加属性

    把创建的节点挂到上一节点的最后 找到参考节点,使用insertBefore方法进行插入位置 xml添加属性使用setAttribute方法

  2. SAP BI 常用TCODE

    S.No Tcode Description 1 RSA1 Administrator Work Bench 2 RSA11 Calling up AWB with the IC tree 3 RSA ...

  3. ES6笔记03-Set和Map数据结构

    ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, 3, 5, 4, ...

  4. 【vlan-端口配置】

    搭建好拓扑图如下: 分别配置两台终端的ip地址 创建vlan把e0/4/0接口加入到新的vlan中 连通性失败 . 同理在把e0/4/1加入到vlan视图中 连通性成功 : 搭建好拓扑图如下 进入e0 ...

  5. pywinauto 的使用

    要用python实现Windows窗口程序的自动化操作,可以用ctypes调用windowsapi来实现,还可以用pywin32+pywinauto来实现,后者是别人造的轮子. pywinauto首页 ...

  6. 微信小程序推广方案

    拥有小程序只是基础,能玩转小程序运营才是关键.本文将会简单讲述十种最实用的小程序推广策略,结合具体案例阐述商家企业如何在拥有小程序后玩转小程序,快速实现小程序的推广. 一. 公众号+小程序 小程序可以 ...

  7. <Docker学习>5. docker数据管理

    当我们创建了一个tomcat容器,如何简单部署一个web应用?如何将war包放入到容器中?也就是说怎么样把文件从宿主机中 "放入" 到容器中? docker cp命令可以将宿主机本 ...

  8. strak组件（6）：列表定制列应用和引入静态文件

    效果图: 新增函数 def get_choice_text(title, field) 闭包函数,显示choice字段 def inner(self, obj=None, is_header=None ...

  9. 笨小熊 南阳acm62

    笨小熊 时间限制:2000 ms  |  内存限制:65535 KB 难度:2   描述 笨小熊的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项 ...

  10. Codeforces Round 97B 点分治

    B. Superset time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...