学习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. c++ shared_ptr 使用注意事项. 1

    条款1:不要把一个原生指针给多个shared_ptr管理 int* ptr = new int; shared_ptr<int> p1(ptr); shared_ptr<int> ...

  2. filter应用案例一：分IP统计访问次数

    统计工作需要在所有资源之前都执行,那么就可以放到Filter中了.用Map<String,Integer>装载统计的数据.Map创建时间(使用ServletContextListener, ...

  3. 廖雪峰js教程笔记3

    JavaScript的函数在查找变量时从自身函数定义开始,从"内"向"外"查找.如果内部函数定义了与外部函数重名的变量,则内部函数的变量将"屏蔽&qu ...

  4. WebSocket协议开发

    一直以来,网络在很大程度上都是围绕着HTTP的请求/响应模式而构建的.客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生.在2005年左右,Ajax开始让网络变得更加动态了.但所有的HTT ...

  5. css 让内容满屏居中不变形

    .selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...

  6. 用Python做自然语言处理必知的八个工具【转载】

    Python以其清晰简洁的语法.易用和可扩展性以及丰富庞大的库深受广大开发者喜爱.其内置的非常强大的机器学习代码库和数学库,使Python理所当然成为自然语言处理的开发利器. 那么使用Python进行 ...

  7. hdu5057 Argestes and Sequence 分块

    Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Submiss ...

  8. 【面经】用递归方法对二叉树进行层次遍历 && 二叉树深度

    void PrintNodeAtLevel(BiTree T,int level) { // 空树或层级不合理 ) return; == level) { cout << T->da ...

  9. http://blog.csdn.net/hitmediaman/article/details/6636402

    http://blog.csdn.net/hitmediaman/article/details/6636402

  10. 项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...