<!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. phpmyadmin-配合nginx与php安装

    1. 概况 phpMyAdmin是用来在网页端图形化操作MySQL数据库的工具,使用起来非常直观,目前最新版本是4.8.3.在搭建web集群架构时可能有这样的需求,数据库安装在专门的一台机器上,但是希 ...

  2. XMR恶意挖矿案例简析

    前言 数字货币因其技术去中性化和经济价值等属性,逐渐成为大众关注的焦点,同时通过恶意挖矿获取数字货币是黑灰色产业获取收益的重要途径.本文简析通过蜜罐获取的XMR恶意挖矿事件:攻击者通过爆破SSH获取系 ...

  3. css定位浮动总结

    定位:定位在中间,放大缩小时也不会跑偏. position:absolute; top: 50%; left: 50%; margin: -270px 0 0 -455px; 解释:定位后,设百分比的 ...

  4. echarts2简单笔记

    1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. rpm服务的独立服务管理

    /etc/init.d  启动脚本的位置 /etc/sysconfig/ 初始化环境配置文件 /etc/   配置文件位置 /etc/xinetd.conf  xinetd配置文件 /etc/xine ...

  6. BufferedImage操作图片笔记(转)

    BufferedImage是Image的一个子类,BufferedImage生成的图片在内存里有一个图像缓冲区,利用这个缓冲区我们可以很方便的操作这个图片,通常用来做图片修改操作如大小变换.图片变灰. ...

  7. python 打印输出至文件中， 'wt'读写文件方式，会把原文件内容清空

    会把原文件内容清空,写最新的 文件必须以文本模式打开,如果文件是二进制模式的话,打印会出错

  8. Hive中的三种不同的数据导出方式介绍

    问题导读:1.导出本地文件系统和hdfs文件系统区别是什么?2.带有local命令是指导出本地还是hdfs文件系统?3.hive中,使用的insert与传统数据库insert的区别是什么?4.导出数据 ...

  9. linux常用命令：ifconfig 命令

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  10. 为什么学Python语言，只需四步全面了解Python语言

    为什么学Python语言,只需四步全面了解Python语言每个时代都会悄悄犒赏会选择的人,Python现在风口的语言Python--第三大主流编程语言Python , 是一种面向对象的解释型计算机程序 ...