需要用到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. python解析ini文件

    python解析ini文件 使用configparser - Configuration file parser sections() add_section(section) has_section ...

  2. 一句话说明==和equals的区别

    public class equals { public static void main(String[] args) { int x=10; int y=10; String str1=new S ...

  3. 聊聊我这两年都在忙什么，IT技术男如何转型！

    从09年开始,从事软件测试工作:至今六年有余: 从当初的简单的功能测试,到后来的整体系统测试,性能测试,至公司测试负责人: 我常常在想,IT技术男,有哪些转型机会,是不是得一辈子从事测试这个职业(注: ...

  4. python3 井字棋 GUI - 人机对战、机器对战 （threading、tkinter库）

    python3 井字棋 GUI - 人机对战.机器对战 功能 GUI界面 人机对战(可选择机器先走) 机器对战(50局) 流程图 内核 棋盘 [0][1][2] [3][4][5] [6][7][8] ...

  5. LeetCode961 重复 N 次的元素

    问题: 重复 N 次的元素 在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3] 输出:3 示例 ...

  6. java多线程批量读取文件( 八)--读写分离

    package com.net.thread.future; import java.io.BufferedReader; import java.io.BufferedWriter; import ...

  7. python学习之列表和元组

    配置环境:python 3.6 python编辑器:pycharm,代码如下: #!/usr/bin/python # -*- coding: UTF-8 -*- # list:是一种有序的集合,可以 ...

  8. B1081 检查密码 （15分）

    B1081 检查密码 (15分) 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母 ...

  9. [BZOJ2243][SDOI2011]染色（树链剖分）

    [传送门] 树链剖分就行了,注意线段树上颜色的合并 Code #include <cstdio> #include <algorithm> #define N 100010 # ...

  10. android IPC 进程间通讯

    参考资料: http://blog.csdn.net/birdsaction/article/details/39451849 在这里我说一下学习技术的方法,别人的博客,别人的东西,再简单,自己没有写 ...