需要用到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. esdoc 自动生成接口文档介绍

    原文地址:https://www.xingkongbj.com/blog/esdoc/creat-esdoc.html 官网 ESDoc:https://esdoc.org/ JSDoc:http:/ ...

  2. Linux apt & yum 及 常用命令

    yum yum 语法 yum [options] [command] [package ...] options:可选,选项包括-h(帮助),-y(当安装过程提示选择全部为"yes" ...

  3. JQ常用方法（哈哈）

    1ajax请求 $(function(){   $("#send").click(function(){     $.ajax({     type:"get" ...

  4. python--Wrapper

    然后给大家介绍的是Wrapper(装饰器),使用广泛.python笔试,面试的话也会百分百问到的,基础和中级的知识储备还是必用的. 让我们开始. 先来一些基础相关知识 *args,**kwargs的区 ...

  5. 《Redis设计与实现》- 复制

    在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他机器,满足故障恢复和负载均衡灯需求.Redis提供了复制功能,实现了相同数据多个副本,复制功能作是高可用Redis的基础,深入理解复制 ...

  6. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  7. 使用CSS隐藏HTML元素的四种常用方法

    CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

  8. python scrapy 实战简书网站保存数据到mysql

    1:创建项目 2:创建爬虫 3:编写start.py文件用于运行爬虫程序 # -*- coding:utf-8 -*- #作者: baikai #创建时间: 2018/12/14 14:09 #文件: ...

  9. SQL Server无法连接到数据库

    连接数据库的时候出现如下错误: 我解决的使用方法: 第一步:关闭上面的错误,取消连接数据库. 第二步:开始->程序->Microsoft SQL Server 2008 R2->配置 ...

  10. Pythontutor:可视化代码在内存的执行过程

    http://www.pythontutor.com/visualize.html今天去问开发一个Python浅拷贝的问题,开发给了一个神器,可以可视化代码在内存的执行过程,一看即懂,太NB了!~真是 ...