html Canvas 画图 能够选择并能移动
canvas 画图,能够选中所画的图片并且能够随意移动图片 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="JS/jquery.min.js"></script>
</head>
<body> <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000; background-color: #CCCCCC;"></canvas>
<input id="Button1" type="button" value="画矩形" onclick="DrawingRec()" />
<input id="Button2" type="button" value="画线" onclick="Drawline()"/>
<p></p>
</body>
</html> <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var list = [];
var currentImag;
var ax, ay, x, y;
var startmove = false;
var c = document.getElementById("myCanvas");
c.onmousedown = function (e) { for (var i = 0; i < list.length; i++) {
var w = list[i].x + list[i].width;
var h = list[i].y + list[i].height;
if (e.clientX < w && e.clientX > list[i].x && e.clientY < h && e.clientY > list[i].y) {
currentImag = list[i];
startmove = true;
console.log("select: true");
} } };
c.onmousemove = function (e) {
console.log("x:" + e.pageX + " y:" + e.pageY);
if (currentImag == null) return;
console.log("moveselect:true"); x = e.clientX;
y = e.clientY; //限制移动不能超出画布
(x < 40) ? ax = 20 : ax = 480;
(y < 40) ? ay = 20 : ay = 380; (x < 480 && x > 20) ? x = e.clientX : x = ax;
(y < 380 && y > 20) ? y = e.clientY : y = ay; //清除之前图片然后重新绘制
ctx.clearRect(0, 0, c.width, c.height);
currentImag.x = x;
currentImag.y = y; Piant();
ctx.drawImage(currentImag, x - 20, y - 20, currentImag.width, currentImag.height); }; c.onmouseup = function () {
//c.onmousemove = null;
//c.onmouseup = null; currentImag = null;
startmove = false;
};
function Piant()
{
if (startmove)
{
for (var i = 0; i < list.length; i++)
{
ctx.drawImage(list[i], list[i].x - 20, list[i].y - 20, list[i].width, list[i].height);
}
}
} function DrawingRec()
{
//ctx.beginPath();
//ctx.fillStyle = "#000000";
//ctx.fillRect(200, 100, 150, 75);
//ctx.closePath(); var img = new Image();
img.src = "default/images/panel_tools.png";
img.x = 50;
img.y = 50;
img.width = 40;
img.height = 40;
ctx.drawImage(img, 50, 50, img.width, img.height); list.push(img);
}
</script>
html Canvas 画图 能够选择并能移动的更多相关文章
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- Canvas画图在360浏览器中跑偏的问题
问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- html5 Canvas画图3:1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- 使用 canvas 画图时图像文字模糊的解决办法
最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- HTML5 Canvas画图与动画学习59例
HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
- 毕业设计总结(1)-canvas画图
去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...
随机推荐
- springboot获取项目跟目录
springboot部署之后无法获取项目目录的问题: 之前看到网上有提问在开发一个springboot的项目时,在项目部署的时候遇到一个问题:就是我将项目导出为jar包,然后用java -jar ...
- PHP生产二维码
1.引入phpqrcode包 <?php include 'phpqrcode.php'; QRcode::png('http://www.learnphp.cn',"code.png ...
- PyQt5系列教程(五)制作fastboot烧写器
软硬件环境 Windows 7 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.2 前言 fastboot是针对Android设备的一种刷机方式,它比recovery更底层,刷 ...
- Rhythmk 学习 Hibernate 03 - Hibernate 之 延时加载 以及 ID 生成策略
Hibernate 加载数据 有get,跟Load 1.懒加载: 使用session.load(type,id)获取对象,并不读取数据库,只有在使用返回对象值才正真去查询数据库. @Test publ ...
- C#串口编程测试收发
原文:http://www.cnblogs.com/vsdot/archive/2013/04/23/3263348.html 基本传递方法:RS232传输要有1位起始位,8位数据位.1位校验位( ...
- JVM知识点精华汇总
本文是学习了<深入理解Java虚拟机>之后的总结,主要内容都来自于书中,也有作者的一些理解.一是为了梳理知识点,归纳总结,二是为了分享交流,如有错误之处还望指出.(本文以jdk1.7的规范 ...
- (转 留存)Windows环境下的NodeJS+NPM+GIT+Bower安装配置步骤
Windows环境下的NodeJS+NPM+GIT+Bower安装配置步骤 标签: NodeJSnpmbower 2015-07-17 16:38 3016人阅读 评论(0) 收藏 举报 分类: G ...
- 对象的notify方法的含义和对象锁释放的三种情况
1,notify的含义 (1)notify一次只随机通知一个线程进行唤醒 (2)在执行了notify方法之后,当前线程不会马上释放该对象锁,呈wait状态的线程也不能马上获得该对象锁, 要等到 ...
- POJ2533 最长递增子序列
描述: 7 1 7 3 5 9 4 8 输出4 最长递增子序列为1 3 5 9,不必连续. 解法: 三种思路: 转化为最长公共子序列(n^2),动态规划(n^2),不知叫什么解法(nlogn). 解法 ...
- Python爬虫进阶五之多线程的用法
前言 我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread ...