学习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. JAVA安装，环境变量配置

    JAVA环境变量设置 PATH %JAVA_HOME%\bin JAVA_HOME D:\ProgramFiles\Java\jdk1.6.0_10 CLASSPATH .;%JAVA_HOME%\l ...

  2. loj 1210 (求最少的加边数使得图变成强连通)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1210 思路:首先是缩点染色,然后重建并且统计新图中的每个点的入度和出度,于是答案就是m ...

  3. CentOS配置本地yum源（使用镜像iso文件）

    本人在使用yum安装软件的时候,感觉最不爽的是网络不佳时,安装的速度特别慢.所以,个人就上网search了一下如何使用Linux的安装文件作为其yum源.经过几次尝试,已经可以成功的配置了.下面是详细 ...

  4. flv文件格式解析!!!

    flv头 FLV header 总体上看,FLV包括文件头(File Header)和文件体(File Body)两部分,其中文件体由一系列的Tag组成. Signature: FLV 文件的前3个字 ...

  5. OAuth2.0 在 SSO中的应用~

    关于OAuth2.0的介绍,请看下面链接(讲的挺好的): http://blog.csdn.net/seccloud/article/details/8192707 我的理解: 一共四个角色,A:Cl ...

  6. unicode-range 字体混搭(转）

    最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素. <div class="font1"></div> <div class=" ...

  7. 6.android加密解析

    编码.数字摘要.加密.解密 UrlEncoder /Urldecoder String str = "http://www.baidu.com?serach = 哈哈"; Stri ...

  8. POJ 1509 最小表示法

    题目链接:http://poj.org/problem?id=1509 题意:给定一个字符串,求一个起点使字符串从该起点起的字符串字典序最小[题目的字符串起点从1开始] 思路:最小表示法模板题 #de ...

  9. express－13 中间件

    简介 从概念上讲,中间件是一种功能的封装方式,具体来说就是封装在程序中处理HTTP请求的功能. 中间件是在管道中执行的,在Express程序中,通过调用app.use向管道中插入中间件.(在Expre ...

  10. iOS __strong __weak @Strongify @Weakify

    @Strongify,@Weakify主要是在block中使用. 因为block一般都在对象内部声明.. 如果在block内部使用了当前对象的属性,就会造成循环引用(block拥有当前对象的地址,而当 ...