<!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. PAT Sign In and Sign Out[非常简单]

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  2. [LeetCode] 694. Number of Distinct Islands

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  3. C# 定时器 一个简单 并且可以直接运行的Demo

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. workerman定时任务使用

      定时任务在有些场合很实用,像淘宝的自动确认收货就必须放在服务端进行,这时workeran的定时任务就派上用场了,它可以支持毫秒,crontab的粒度是一分钟 需要注意的是因为定时任务一直在执行,业 ...

  5. Junit4用法

    序号 方法和描述 1 void assertEquals(boolean expected, boolean actual) 检查两个变量或者等式是否平衡 2 void assertTrue(bool ...

  6. VS2010/MFC编程入门之四十八（字体和文本输出：文本输出）

    鸡啄米在上一节中讲了CFont字体类,本节主要讲解文本输出的方法和实例. 文本输出过程 在文本输出到设备以前,我们需要确定字体.字体颜色和输出的文本内容等信息.Windows窗口的客户区由应用程序管理 ...

  7. EditPlus 4.3.2583 中文版已经发布

    新的版本提升了括号匹配的性能.请点击页面左上角连接下载.

  8. ASCII说明和ASCII对照表

    ASCII 说明 ASCII 码使用指定的 7 位或 8 位二进制数组合来表示 128 或 256 种可能的字符.标准 ASCII 码也叫基础ASCII码,使用 7 位二进制数来表示所有的大写和小写字 ...

  9. quartz-job实现实时或定时发送短信任务

    存放调度器(Job 和 Trigger)信息的xml配置文件: 这是某个指定的要实现的定时任务: <!-- 每天给项目经理发送短信避免短信服务挂了 定时每天08:30执行--> <j ...

  10. python webdriver api-右键另存下载文件

    右键另存下载文件 先编辑SciTE脚本: ;ControlFocus("title","text",controlID) ;表示将焦点切换到标题为title窗体 ...