<!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. 让你分分钟了解Web接口测试

    因为前后端架构分离技术的兴起,接口测试也越来越重要,最近一直想总结下,作为一个近三年的测试人员,接口这个词是耳濡目染的,而开发张口闭口也都是这个接口或那个接口怎么怎么样,自己遇到的bug也很多是接口问 ...

  2. selenium webdriver窗口切换(下)

    多窗口切换有时候需要在不同的窗口切换,从而操作不同的窗口上的元素.在selenium1.0 中这个问题比较难处理.但WebDriver 提供了switcTo.window()方法可以切换到任意的窗口. ...

  3. iOS UI基础-5.0 QQ框架（Storyboard）

    1.拉入TabBarController和4个Navigation 2.TabBarController关联Navigation 3.设置消息,拉入一个Button,设置背影 4.联系人,拉入一个Se ...

  4. ！！【通达信】求教：如何对A股的所有股票按照某个选股指标的某个参数排序？ - 理想论坛 中国人气最旺的股票论坛

    http://www.55188.com/thread-7152852-1-1.html .401进入指标排序,然后占右键把指标更改为MACD即可.(注意401前投资面有一个点!)

  5. js时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. python 读不同编码的文本，传递一个可选的encoding 参数给open() 函数

    文件的读写操作默认使用系统编码,可以通过调用sys.getdefaultencoding() 来得到.在大多数机器上面都是utf-8 编码.如果你已经知道你要读写的文本是其他编码方式,那么可以通过传递 ...

  7. Python 为什么要用yield

    可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ?我们先抛开 generator,以一个常见的编程题目来展示 yield 的概 ...

  8. 页面点击，不是a标签也会刷新原因

    页面点击,不是a标签也会刷新原因 点击事件冒泡,触发了a链接导致整个页面刷新了.直接阻止 事件冒泡即可 例子: $("tr .am-text-danger").click(func ...

  9. centos 安装 jdk8和comcat8

    1.去官网下载Linux版本的jdk8 2.进入ags,把tar.gz的压缩包拷贝到用户下指定目录java,然后解压 mkdir /home/ags/java tar -zxv -f jdk-8u11 ...

  10. python之路----面向对象的多态特性

    多态 多态指的是一类事物有多种形态 动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): #同一类事物:动物 @abc.abstr ...