需要用到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. 第35题：LeetCode138. Copy List with Random Pointer

    题目 给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 考点 思路 代码 /** * Definition for singly ...

  2. 解决mysql远程连接失败的问题

    问题描述 在我远程连接我的服务器数据库的时候,navicat给我提示了这么一个错误: ERROR : Host 'xxx' is not allowed to connect to thisMySQL ...

  3. FastDFS文件管理系统

    一.FastDFS介绍 FastDFS 是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡.主要解决了海量数据存储问题,特别适合以中小文 ...

  4. 交换机基础配置之三层交换机实现vlan间通信

    我们以上面的拓扑图做实验,要求为pc1,pc2,pc3配置为vlan10,pc4,pc5,pc6配置为vlan20,pc7,pc8,pc9配置为vlan30 server0和server1配置为vla ...

  5. FreeBSD--网络配置

    配置网口:ifconfig |less dc0: flags=8843<UP,BROADCAST,RUNNING,SIMPLEX,MULTICAST> mtu 1500         i ...

  6. stat.h头文件，轻松获取文件属性

    [以前还为了获取文件的长度,费劲从头读取一遍,一个一个字节的算. 做webserver时候,发现原来stat函数可以返回一个结构,里面包括文件的全部属性. 真是曲折啊.] #i nclude<s ...

  7. 用python实现【五猴分桃】问题

    转载链接:https://blog.csdn.net/cy309173854/article/details/78296839 据说“五猴分桃”问题最先是由大物理学家狄拉克提出来的,这一貌似简单的问题 ...

  8. 笔记-scrapy-item

    笔记-scrapy-item 1.总述 爬虫数据保存用,一般情况下无需过多处理,引用并使用Field方法即可. 2.使用 常规使用: import scrapy class Product(scrap ...

  9. python基础之生成器、三元表达式、列表生成式、生成器表达式

    生成器 生成器函数:函数体内包含有yield关键字,该函数执行的结果是生成器,生成器在本质上就是迭代器. def foo(): print('first------>') yield 1 pri ...

  10. PHP.TP框架下商品项目的优化4-优化商品添加表单js

    优化商品添加表单js 思路 1.制作五个按钮 2.下面五个table 3.全部隐藏,点击则显示 4.点击第几个按钮就显示第几个table 具体操作 1.添加按钮 2.添加五个table并添加class ...