学习html5 canvas，写了一个小练习来加深理解,可以实现图形随拖动而复制。

<!DOCTYPE html>

<html>

	<head>

	 <meta charset="utf-8">

	 <title>demoCanvas2</title>

	 <style>

	    *{margin:0px;padding:0px;}

	   #out{

	     position:absolute;

		 width:800px;

		 height:500px;

		 position:absolute;

		 top:0px;

		 left:0px;

		 border:1px solid #ff0000;

		 }

		.demo1{

		  position:absolute;

		  width:100px;

		  height:100px;

		  top:10px;

		  left:10px;

		  border:1px solid #ff0000;

		}

		#util{

		   position:absolute;

		   width:350px;

		   height:300px;

		   top:50px;

		   right:50px;

		   }

		 </style>

	</head>

	<body>

	  <div id="out">

	    <canvas id="demo1" class="demo1"></canvas>

	  </div>

	  <div id="util">

	    <p>

		<h2>操作简介</h2>

		移动图形:单击图形不放并移动。<br/>

		复制图形:松开鼠标。<br/>

		结束操作:双击鼠标。

		</p>

	    鼠标横坐标:<input type="text" id="lan1"/><br>

		鼠标纵坐标:<input type="text" id="lan2"/>

	  </div>

	     <script>

		//绘制基本图像

		  var demo1=document.getElementById("demo1");

		  var pen1=demo1.getContext("2d");

		  pen1.moveTo(2,2);

		  pen1.lineTo(20,100);

		  pen1.lineTo(200,40);

		  pen1.lineTo(2,2);

		  pen1.stroke();

		 //鼠标单击demo1对象时

		  demo1.onmousedown=function(e){

		  // 记录demo1的宽和高

		  var myWidth=e.clientX-demo1.offsetLeft;

		  var myHeight=e.clientY-demo1.offsetTop;

		  //记录此时坐标位置

		  var left0=this.offsetLeft;

		  var top0=this.offsetTop;

		  //鼠标移动时

		  demo1.onmousemove=function(e){

		  //demo1跟随鼠标坐标

		  demo1.style.left=e.clientX-myWidth+"px";

		  demo1.style.top=e.clientY-myHeight+"px";

		  //设置边界，当对象移动到右边界，左边距始终保持700px

		  if(demo1.offsetLeft>=700){

		      demo1.style.left=700+"px";

		  }

		  // 当对象移动到左边界，左边距始终为0px

		  if(demo1.offsetLeft<=0){

		     demo1.style.left=0+"px";

		  }

		  //当对象移动到下边界，上边距始终为400px

		  if(demo1.offsetTop>=400){

		     demo1.style.top=400+"px";

		  }

		  //当对象移动到上边界，上边距始终为0px

		  if(demo1.offsetTop<=0){

		      demo1.style.top=0+"px";

		  }

		   //显示鼠标坐标位置

		  var lan1=document.getElementById("lan1");

		  var lan2=document.getElementById("lan2");

		  lan1.value=e.clientX;

		  lan2.value=e.clientY;

		}

		  //当鼠标松开时

		   demo1.onmouseup=function(){

				 //创建新标签<canvas>

	       var demo=document.createElement("canvas");

	               //动态设置<canvas>对象的样式

	       demo.style.cssText="width:100px;height:100px;position:absolute;left:"+left0+"px;"+"top:"+top0+"px;border:1px solid #ff0000";

	              //将对象加入到body中

	       var body=document.getElementsByTagName("body")[0];

	       body.appendChild(demo);

	       var pen=demo.getContext("2d");

	         pen1.moveTo(2,2);

		     pen.lineTo(20,100);

		     pen.lineTo(200,40);

		     pen.lineTo(2,2);

		     pen.stroke();

		 } 

		   //双击鼠标时结束

		 window.ondblclick=function(){

	           alert("执行结束！");

			 }

		         }

	 </script>

	  <div id="test"></div>

    </body>

</html>

　　如果您觉得我写的东西对您有些帮助，请帮我点个推荐，互粉交个学习路上的好友，我是菜鸟，你的鼓励是我前进的动力。

html5 canvas画图之图形随拖动而复制（有操作指示）的更多相关文章

  1. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  2. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  3. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  4. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  5. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  6. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  7. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  8. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  9. 用HTML5 Canvas为Web图形创建特效

    HTML5 Canvas 将使用像素在屏幕上绘制图形图像. 本节演示了五种用于操作像素以创建摄影特效的 Canvas 技术. 您可使用这些技术来生成独具特色的图像,为您的网站.博客.视频游戏画面.广告 ...

随机推荐

  1. Windows硬件断点-实现单步异常

    触犯单步异常 改变的是当前Eflags 而不是触发异常的Eflags 也就是 PUSHF MOV EAX, DWORD PTR[ESP]       OR EAX, 0x100       MOV D ...

  2. HDU 5875 Function (2016年大连网络赛 H 线段树+gcd)

    很简单的一个题的,结果后台数据有误,自己又太傻卡了3个小时... 题意:给你一串数a再给你一些区间(lef,rig),求出a[lef]%a[lef+1]...%a[rig] 题解:我们可以发现数字a对 ...

  3. hdu1520 Anniversary party (树形dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1520题意:上司和直系下属不能同时参加party,求party的最大活跃值.输入: 输入n个 ...

  4. 5.15[没什么营养的一段日子]A*

    五月份没有写过blog. 期中考刚过......漫漫文化课,无尽头. 马上要为联赛开坑了,激动啊. 刚听了孙柘的演讲..%%% 最近刷的题只有一道启发式合并,一道分层图,一道差分约束..然后不知不觉破 ...

  5. Android 自动化测试—robotium(八) 拖拽

    本文来源于:http://xiaomaozi.blog.51cto.com/925779/933056 SeekBar控件 代码实现:http://luwenjie.blog.51cto.com/92 ...

  6. #ASP.NET Core 1.0 Key Features

    Cross platform support and flexible runtime engine(跨平台支持和灵活的运行时引擎) ASP.NET Core 1.0 offers support f ...

  7. Oracle 使用小计（4）

    1.oracle字符串分割函数split )定义split_type类型: CREATE OR REPLACE TYPE split_type IS TABLE OF VARCHAR2 (4000) ...

  8. jqgrid显示一行的详情

    http://blog.csdn.net/yangbobo1992/article/details/7930145 http://www.trirand.com/jqgridwiki/doku.php ...

  9. ccc 使用let

    //如果不是恩雅,也不在移动过程中,那么移动 if (!self.hasMoved && !isHold) { var touchLoc = touch.getLocation(); ...

  10. BZOJ3424 : Poi2013 Multidrink

    详细做法以及证明请看论文<Hamiltonian paths in the square of a tree>. 首先将1到n的路径提取出来,作为主干. 定义毛毛虫为去掉叶子之后只有一条单 ...