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表示颜色的变换形式 ...
随机推荐
- PAT 1087 All Roads Lead to Rome[图论][迪杰斯特拉+dfs]
1087 All Roads Lead to Rome (30)(30 分) Indeed there are many different tourist routes from our city ...
- Build-in Function:abs(),all(),any(),assii(),bin(),issubclass(),bytearray(),isinstance()
print('abs():输出绝对值,是absolute的缩写--------------') print(abs(-1)) print('all()与any()------------------- ...
- js全选反选
<style type="text/css"> table { width: 800px; text-align: left; border-collapse: col ...
- C/S模型之命名管道
说明:利用管道实现服务端与客户端之间的交互.效果等同于利用socket. 命名管道(NamedPipe)是一种简单的进程间通信(IPC)机制,是服务器进程和一个或多个客户进程之间通信的单向或双向管道. ...
- “System.Data”中不存在类型或命名空间名称“TypedTableBase”
错误 1 命名空间“System.Data”中不存在类型或命名空间名称“TypedTableBase”(是否缺少程序集引用?) 解决方案 因为是把强类型DataSet文件绑定报表的项目中出现的错误, ...
- http://xx.xxx.xxx.xx:8080/把路径设置成http服务访问的形式
1.官网下载python安装包(eg:python-3.6.3-embed-win32),并解压文件 2.配置环境变量 3.cmd里查看python版本并设置服务路径 4. 访问查看
- Ignite初探
Guava是一个很方便的本地缓存工具,但是在多节点处理的过程中,本地缓存无法满足数据一致性的问题.分布式缓存Ignite很好的解决了数据一致性,可靠性,事务性等方面的问题. Ignite支持分区方式和 ...
- Linux服务器配置---ftp限制带宽
限制带宽 ftp服务器可以设置每个用户的带宽,这样根据实际需求来分配,更加充分的利用系统资源.带宽通过参数“anon_max_rate“和”local_max_rate“来设置,这两个参数在配置文件中 ...
- centos crontab详解
1.crontab安装 [root@CentOS ~]# yum install vixie-cron [root@CentOS ~]# yum install crontabs 说明:vixie-c ...
- MySQL笔记（三）由txt文件导入数据
改编自学校实验,涉及一些字符集相关的问题. 索引 建库 导入数据 最终脚本 下载数据 点击这里 建库 create.sql DROP DATABASE IF EXISTS orderdb; CREAT ...