需要用到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. Hive[6] HiveQL 查询

    6.1   SELECT ... FROM 语句    hive> SELECT name,salary FROM employees;    --普通查询 hive>SELECT e.n ...

  2. What is JPA

    What is JPA JPA可以看做是EJB3.0的一部分,但它又不限于EJB 3.0,你可以在Web应用.甚至桌面应用中使用.JPA只是一种Java持久化标准,它意在规范ORM(对象关系映射模型) ...

  3. 虚拟机无法ping通物理机的解决方案

    环境:Windows7下安装虚拟机,虚拟机上装有Ubuntu16.04的server版系统. 1.打开Windows防火墙,在打开或关闭Windows防火墙中 关闭Windows的防火墙. 2.禁用服 ...

  4. C指针（1）——指针在数组中的应用（程序讲解）

    2-1.c数组指针的定义: #include <stdio.h> int main() { char str[]="China Beijing Fujian"; //定 ...

  5. python -- configparse读取配置文件

    在开发过程中,有的时候需要将一些参数写入到配置文件中,这样在改动一些相关信息时,可以直接在配置文件中进行修改. 而在python中,可以通过内置模块configparse对标准的配置文件进行读取. 配 ...

  6. 对Neural Machine Translation by Jointly Learning to Align and Translate论文的详解

    读论文 Neural Machine Translation by Jointly Learning to Align and Translate 这个论文是在NLP中第一个使用attention机制 ...

  7. R-biomaRt使用-代码备份

    目标:使用R脚本从ensembl上下载transcript数据 简单粗暴,直接上代码.biomaRt的介绍晚一点更新. # this file helps extract information fr ...

  8. 呕心沥血写的python猜数字

    #猜数字 import random num_rd=random.randint(0,100) count=1 while 1<=count<=10: num_ip=input('请输入0 ...

  9. NOIP PJ游记

    Day -1 感觉自信满满,一等奖应该稳了,毕竟初一时我这么菜都拿了二等奖,然后就睡觉了... Day 1 在大巴上玩元气骑士可开心了,车上欢欢喜喜,到了考场,一眼看题,以为很简单. T1硬模拟... ...

  10. Pandas 文本数据

    Pandas针对字符串配备的一套方法,使其易于对数组的每个元素(字符串)进行操作. 1.通过str访问,且自动排除丢失/ NA值 # 通过str访问,且自动排除丢失/ NA值 s = pd.Serie ...