学习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. 获取内核当前执行模块和当前发生异常地址和线程异常Handler调用步骤

    循环每个内核模块 统计模块大小 判断触发异常的地址属于那个模块.来确定模块 获取发生异常地址 nt!_EXCEPTION_RECORD +0x000 ExceptionCode : -21391605 ...

  2. LayoutInflater(四)

    如果说要按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件.组合控件.以及继承控件.那么下面我们就来依次学习一下,每种方式分别是如何自定义View的. 一.自绘控件 自绘控件的意思就 ...

  3. asp.net权限控制配置web.config

    项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...

  4. C#与mysql做ASP.NET网页数据库查询速度测试

    两种方法是:1,使用mysql数据库的存储过程:2,C#编码,做网页后台与mysql数据库连接,前台测试显示测试过结果下面我将分别讲解两种方法的具体实现. 1,使用mysql数据库的存储过程插入万条大 ...

  5. js库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

  6. unity 解析tmx 2

    using UnityEngine; using System.Collections; using System.Collections.Generic; using System.IO; usin ...

  7. [转]CentOS下安装伪分布式Hadoop-1.2.1

    From: http://blog.csdn.net/yinan9/article/details/16805275 环境:CentOS 5.10(虚拟机下) [root@localhost hado ...

  8. webpack练手项目之easySlide（三）：commonChunks（转）

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

  9. Android Properties 存储

    1.初始化 private static void initProperties(){ File logFile = new File(Constants.PROGRESS_PROPERTIES); ...

  10. nginx配置文件中的location中文详解

    location 语法:location [=|~|~*|^~] /uri/ { … }默认:否 上下文:server 这个指令随URL不同而接受不同的结构.你可以配置使用常规字符串和正则表达式.如果 ...