<!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. Saving Princess claire_（hdu 4308 bfs模板题）

    http://acm.hdu.edu.cn/showproblem.php?pid=4308 Saving Princess claire_ Time Limit: 2000/1000 MS (Jav ...

  2. PAT 1040 Longest Symmetric String[dp][难]

    1040 Longest Symmetric String (25)(25 分) Given a string, you are supposed to output the length of th ...

  3. 【Cocos2dx 3.3 Lua】滚动字幕

    参考资料:     http://blog.csdn.net/jackystudio/article/details/12991977   1.原理         通过调用update来更新位置达到 ...

  4. AWS邮件通知服务：实时监控邮件状态

    以下为译文: 订阅“AWS中文技术社区”微信公众号,实时掌握AWS技术及产品消息! AWS中文技术社区为广大开发者提供了一个Amazon Web Service技术交流平台,推送AWS最新资讯.技术视 ...

  5. http 同步异步请求

    在用户交互模式下,当你改变表单中某个组件的值时, 譬如你填写名字.修改性别.选择爱好的时候,浏览器和服 务器至今没有发生任何交互,只有当你点击submit的时候, 浏览器才会把你的参数,也就是form ...

  6. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  7. ef延迟加载不到导航属性问题

    最近做项目踩到了一个ef问题上的坑,导航属性(外键关键,如子表或主表等)“.”出来后是Null,外键值也对,数据库和ef的关系配置也都正确,就是加载不出来.后来发现实体里导航属性前少了个virtual ...

  8. STA分析(三) cmos模型

    CMOS集成电路的基本结构是以P型材料作为衬底(p-substrate),直接生成NMOS, 同时增加N肼(n-well),在其上制造PMOS. 增加两个bulk(P+,N+)防止非MOS管内的PN结 ...

  9. CATiledLayer

    CATiledLayer 有些时候你可能需要绘制一个很大的图片,常见的例子就是一个高像素的照片或者是地球表面的详细地图.iOS应用通畅运行在内存受限的设备上,所以读取整个图片到内存中是不明智的.载入大 ...

  10. 【Redis学习之三】Redis单节点安装

    本文介绍两个版本:redis-2.8.18.tar.gz 和 redis-3.0.0-rc2.tar.gz,均采用源码安装方式 一.redis3.0 部署环境 redis-3.0.0-rc2.tar. ...