canvas 实现鼠标画出矩形
<!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 实现鼠标画出矩形的更多相关文章
- 用canvas实现鼠标拖动绘制矩形框
需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...
- html 画出矩形，鼠标弹起，矩形消失
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- canvas实现鼠标拖拽矩形移动改变大小
项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...
- cv2.matchTemplate()函数的应用,匹配图片后画出矩形
import cv2 as cv import numpy as np """ matchTemplate(): 参数image:待搜索的图像(大图) 参数temple: ...
- WPF 在image控件用鼠标拖拽出矩形
原文:WPF 在image控件用鼠标拖拽出矩形 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee ...
- 2018-11-19-WPF-在image控件用鼠标拖拽出矩形
title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...
- OpenCV之响应鼠标（四）：在图像上绘制出矩形并标出起点的坐标
涉及到两方面的内容:1. 用鼠标画出矩形.2.在图像上绘制出点的坐标 用鼠标绘制矩形,涉及到鼠标的操作,opencv中有鼠标事件的介绍.需要用到两个函数:回调函数CvMouseCallback和注册回 ...
- java绘图原理------在窗口界面（或面板上）画出一张或多张图片问题解决方法
/** *@author blovedr * 功能: java绘图原理------在窗口界面(或面板上)画出一张或多张图片问题解决方法 * 日期: 2018年4月28日 16:20 * 注释: ...
- 机器学习进阶-图像金字塔与轮廓检测-轮廓检测 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表示颜色的变换形式 ...
随机推荐
- python安装HTMLTestRunner
== https://pypi.org/project/html-testRunner/#files 下载 放在这路径下 cmd中进行安装
- [LeetCode] 690. Employee Importance_Easy tag: BFS
You are given a data structure of employee information, which includes the employee's unique id, his ...
- c#实现图片二值化例子（黑白效果）
C#将图片2值化示例代码,原图及二值化后的图片如下: 原图: 二值化后的图像: 实现代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...
- Postman使用js获取日期
在用postman进行接口自动化测试的时候,某个查询接口需要使用到日期参数进行请求: 假设当前日期为2018-05-07 10:30:20 ,需要传的日期为: beginTime:2018-05-01 ...
- Jmeter接口自动化测试 （四）（持续构建）
本文转载至http://www.cnblogs.com/chengtch/p/6145867.html Jmeter是压力测试.接口测试工具,Ant是基于Java的构建工具,具有跨平台的作用,jen ...
- 优化改良版：数组，List,等集合需要加逗号或其它符合转成字符串
大家经常需要数组加逗号拼接成字符串的情况传统作法就是写for,foreach拼接, 现给出优化改良版数组,List,等集合需要加逗号或其它符合转成字符串方法: List<string> l ...
- mysql5.7服务器The innodb_system data file 'ibdata1' must be writable导致无法启动服务器
现象如下:The innodb_system data file 'ibdata1' must be writable. 解决方案如下: 1.关闭mysqld进程: 2.删除配置文件中datadir所 ...
- linux中的查找命令
which命令:使用which命令可以看到某个系统命令是否存在,以及执行的到底是哪一个位置上的命令.在PATH指定的路径中进行搜索, 返回第一个搜索结果. which grep /bin/grep ...
- Learning to Rank算法介绍：RankNet，LambdaRank，LambdaMart
之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to Rank的基本原理,也讲到了Learning to R ...
- Object-C-复制
copy 减少对象上下文依赖 copy 创建一个新对象,copy得到的副本对象与原来内容相同,新的对象retain为1,与旧有对象的引用计数无关,旧有对象没有变化 使用 copy 创建出来的对象是不可 ...