学习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. MOS X 下Apache服务器配置,及日志读取

    A01-配置Apache 在当前用户的目录创建一个文件夹 打开finder进入/etc/apache2/etc/apache2 是系统目录,默认不显示 进入该目录有两种方法 i. 显示所有隐藏和系统目 ...

  2. PopupWindow响应返回键的问题

    假设情景是这样的:在一个Activity中弹出一个PopupWindow,要求在按返回键时关闭该PopupWindow. 如果该PopupWindow是无焦点的(默认情况),那么可以在Activity ...

  3. Markdown语言.md文件

    转自:http://www.kuqin.com/shuoit/20141125/343459.html 之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是 ...

  4. UVA 12232 Exclusive-OR（并查集+思想）

    题意:给你n个数,接着三种操作: I p v :告诉你 Xp = v I p q v :告诉你 Xp ^ Xq = v Q k p1 p2 … pk:问你k个数连续异或的结果 注意前两类操作可能会出现 ...

  5. Loadrunner中动态添加虚拟用户

    添加的虚拟用户会立马开始执行: 场景组的两种模式: Vuser组模式: Vuser组模式中,对于压力负载机是不能同时添加多个 但是我们可以在一个脚本里通过多次添加Vuser,每次添加30个Vuser, ...

  6. 车销送货上门专用无线开单器-自带PDA无线移动开单系统 与云服务器连接

    浩瀚技术配套PDA终端软件 本软件与 数据采集器搭配销售,PDA端软件不单独销售也不含电脑端管理软件 数据采集器 一维扫描头+WIFI+蓝牙+一体打印+PDA软件.  产品特点: 1:通过操作移动手持 ...

  7. css3 -- 渐变

    1.Firefox中的线性渐变 E{ background-image:-moz-linear-gradient(point or angle , form-stop, color-stop, to- ...

  8. vs2010 安装MVC 3.0

    下载链接如下: MVC 3安装包:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid=d2928bc1-f48c-4e95-a ...

  9. Flume interceptor 使用注意事项

    1. 在使用 Regex Filtering Interceptor的时候一个属性是excludeEvents 当它的值为true 的时候,过滤掉匹配到当前正则表达式的一行 当它的值为false的时候 ...

  10. linux TCP Wrappers

    1. TCP Wrapper简介 (出处:http://www.softpanorama.org/Net/Network_security/TCP_wrappers/) (维基百科)TCP Wrapp ...