<!doctype html>

<html>

<head>

<meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<script>

var startX, startY;

var isdown=0

function mouseUp(e,d)

{

	isdown=0;

	var c=document.getElementById("myCanvas");

	height=c.style.height

	width=c.style.width

	var ctx=c.getContext("2d");

	ctx.clearRect(0,0,350,350);

}

function mouseDown(e,d)

{

	down_id=e.id;

	startX = d.pageX;

	startY = d.pageY;

	isdown=1;

	console.log(startX+",,,,"+startY)

}

function mousemove(e){

	if(isdown){

		//console.log(e.pageX+","+e.pageY)

		// 更新 box 尺寸

		//ab.style.width = e.pageX - startX + 'px';

		//ab.style.height = e.pageY - startY + 'px';

		//获取页面中的canvas画布容器，通常为一个div

		var c=document.getElementById("myCanvas");

		height=c.style.height

		width=c.style.width

		var ctx=c.getContext("2d");

		ctx.lineWidth=1;

		ctx.clearRect(0,0,350,350);

		ctx.beginPath();

		ctx.moveTo(startX,startY);

		ctx.lineTo(e.pageX,startY);//shang heng

		ctx.lineTo(e.pageX,e.pageY);//you

		ctx.lineTo(startX,e.pageY);//zuo

		ctx.closePath();

		ctx.stroke();

	}

}

</script>

</head>

<body onmouseup="mouseUp(this,event)" onmousemove="mousemove(event)" onmousedown='mouseDown(this,event)'>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

</body>

</html>

　　

canvas 实现鼠标画出矩形的更多相关文章

  1. 用canvas实现鼠标拖动绘制矩形框

    需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...

  2. html 画出矩形，鼠标弹起，矩形消失

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  4. cv2.matchTemplate()函数的应用,匹配图片后画出矩形

    import cv2 as cv import numpy as np """ matchTemplate(): 参数image:待搜索的图像(大图) 参数temple: ...

  5. WPF 在image控件用鼠标拖拽出矩形

    原文:WPF 在image控件用鼠标拖拽出矩形 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee ...

  6. 2018-11-19-WPF-在image控件用鼠标拖拽出矩形

    title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...

  7. OpenCV之响应鼠标（四）：在图像上绘制出矩形并标出起点的坐标

    涉及到两方面的内容:1. 用鼠标画出矩形.2.在图像上绘制出点的坐标 用鼠标绘制矩形,涉及到鼠标的操作,opencv中有鼠标事件的介绍.需要用到两个函数:回调函数CvMouseCallback和注册回 ...

  8. java绘图原理------在窗口界面（或面板上）画出一张或多张图片问题解决方法

    /** *@author blovedr * 功能: java绘图原理------在窗口界面(或面板上)画出一张或多张图片问题解决方法 * 日期: 2018年4月28日     16:20 * 注释: ...

  9. 机器学习进阶-图像金字塔与轮廓检测-轮廓检测 1.cv2.cvtColor(图像颜色转换) 2.cv2.findContours(找出图像的轮廓) 3.cv2.drawContours(画出图像轮廓) 4.cv2.contourArea(轮廓面积) 5.cv2.arcLength(轮廓周长) 6.cv2.aprroxPloyDP(获得轮廓近似) 7.cv2.boudingrect(外接圆)..

    1. cv2.cvtcolor(img, cv2.COLOR_BGR2GRAY) # 将彩色图转换为灰度图 参数说明: img表示输入的图片, cv2.COLOR_BGR2GRAY表示颜色的变换形式 ...

随机推荐

  1. easyUI的datebox添加清空按钮功能

    需要修改源码: 第一步:按下图修改 第二步:按下两图修改(*zh_CN.js)

  2. python三步实现人脸识别

    原文地址https://www.toutiao.com/a6475797999176417550 Face Recognition软件包 这是世界上最简单的人脸识别库了.你可以通过Python引用或者 ...

  3. http协议基础（三）几种数据传输方式

    说说http协议的一些特点: 1)无状态 http协议是一种自身不对请求和响应之间的通信状态进行保存的协议,即无状态协议. 这种设置的好处是:更快的处理更多的请求事务,确保协议的可伸缩性 不过随着we ...

  4. 从游戏开发到web前端——仅仅只是开始

    文章开头,请允许我随便扯扯. 一来,开头从来都是最难写的,二来,描述我现在的心情和状态以及工作背景啥的,对于大家理解后面的内容也许会有所帮助~ 2012年211大学毕业,工作4年了,一直都是做游戏前端 ...

  5. C#导出Excel总结

    一.asp.net中导出Execl的方法:在asp.net中导出Execl有两种方法,一种是将导出的文件存放在服务器某个文件夹下面,然后将文件地址输出在浏览器上:一种是将文件直接将文件输出流写给浏览器 ...

  6. RVDS编译器

    不同ARM的体系结构,使用的ARM RealView编译工具时的异同点. 1)ARM体系结构v6K首次引入对4个CPU的MPCore处理器支持,高效的多重处理系统与单CPU系统相比,功耗更低,散热量更 ...

  7. MSF渗透测试-CVE-2017-11882（MSOffice漏洞）

    1.测试环境 2.测试前准备 3.测试过程 -3.1虚拟机环境测试 -3.2局域网靶机测试 4.测试感想 1.测试环境 攻击机: OS:kail IP:192.168.15.132/192.168.1 ...

  8. Linux命令: 在线练习网址

    1.https://www.tutorialspoint.com/unix_terminal_online.php 2.从 这里 https://www.tutorialspoint.com/inde ...

  9. 2018-2019-2 20165209 《网络对抗技术》Exp2：后门原理与实践

    2018-2019-2 20165209 <网络对抗技术>Exp2:后门原理与实践 1 后门原理与实验内容 1.1 后门原理 -后门就是不经过正常认证流程而访问系统的通道. 哪里有后门呢? ...

  10. JSP禁用缓存常用方法

    内容主要转自:http://www.cnblogs.com/linjiqin/archive/2011/07/20/2111627.html jsp页面禁止缓存设置 1.客户端缓存要在<head ...