htm5拖放和画布
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
首先，为了使元素可拖动，把 draggable 属性设置为 true
ondragover 事件规定在何处放置被拖动的数据。
当放置被拖数据时，会发生 drop 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 200px;height: 100px;border: 1px solid black;float: left;text-align: center;padding-top: 30px;}
</style>
</head>
<body>
<div id="div1"><img id="img" src="w3school_logo_black.gif" draggable="true"></div>
<div id="div2"></div>
</body>
<script type="text/javascript">
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var img=document.getElementById("img");
div1.ondragover=function(e){
e.preventDefault(); //来避免浏览器对数据的默认处理
}
div1.ondrop=function(){
div1.appendChild(img); //将图片添加到DIV1
}
div2.ondragover=function(e){
e.preventDefault(); //来避免浏览器对数据的默认处理
}
div2.ondrop=function(){
div2.appendChild(img); //将图片添加到DIV2
}
</script>
</html>
canvas 元素用于在网页上绘制图形。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
body{
text-align: center;
}
#canvas{
border:1px solid red;
}
</style>
</head>
<body>
<h1>测试Canvas</h1>
<canvas id="canvas" width="1000" height="500">不支持Canvas</canvas> //创建一个画布，并设置大小
</body>
<script>
var canvas = document.getElementById("canvas"); //设置画布
var context = canvas.getContext("2d"); //设置画笔
drawRect();
function drawRect(){
for(var i = 0;i < 20;i++){ //循环19次
context.strokeStyle = "rgb("+generateCode(256)+","+generateCode(256)+","+generateCode(256)+")"; //循环设置边框的颜色
context.strokeRect(500-i*10,250-i*10,10+20*i,10+20*i); //循环设置矩形的位置和大小
}
}
function generateCode(num){
var random = parseInt(Math.random() * num); //设置一个随机数
return random;
}
</script>
</html>
htm5拖放和画布的更多相关文章
- 面试题<初级>
INTERVIEW .markdown-body ul pre code { background:red; font-size:40px; } @code-char:"```" ...
- 分享第一次使用ProcessOn心得
最近朋友推荐了我一款在线作图工具ProcessOn,感受使用了几天感觉确实很不错,在这里给大家分享一下! ProcessOn应该算的上是第一款完全免费在线作图工具,之前用过国外有类似的,不过都是付费的 ...
- Principle-初步认识（简介）
Principle官网 探究了一下 . 呃--作出了下边这玩意 做的好的是这样的,瞬间把自己给菜了,给大家看看,设计需要UI功夫啊 把这个用上你的界面就搞基了,图形在水平.垂直上的动态效果(*.*) ...
- ADT工具使用详解
备注:一下内容为本人手工翻译官方文档注解,如有翻译不到位的地方,欢迎批评指正; ADT(Android开发工具)是Eclipse的插件,它提供了一套与Eclipse IDE集成的工具.它可以让您访问许 ...
- AxureRP8实战手册
基础操作篇 本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍.同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握. 第1章 使用元件 本文目 ...
- Orange的数据挖掘工具入门使用
Orange的数据挖掘工具入门使用 声明: 1)本报告由博客园bitpeach撰写,版权所有,免费转载,请注明出处,并请勿作商业用途. 2)若本文档内有侵权文字或图片等内容,请联系作者bitpeach ...
- IOS开发入门实例
关于如何创建第一个 iOS 应用 本篇“第一个 iOS 应用”教程将向你介绍 iOS 应用开发中的“三个T”: Tools(工具)如何利用 Xcode 创建和管理工程. Technologies(技术 ...
- HTML5 课程
http://www.w3school.com.cn/html5/html_5_geolocation.asp HTML5 教程 HTML5 教程 HTML5 简单介绍 HTML5 视频 HTML5 ...
- 不知如何创建UML电路图？看看本文
Visual Paradigm是包含设计共享.线框图和数据库设计新特性的企业项目设计工具.现在你只需要这样单独的一款模型软件 Visual Paradigm就可以完成用UML设计软件,用BPMN去执行 ...
随机推荐
- rsyslog管理分布式日志
[TOC] 背景 有一个4台机器的分布式服务,不多不少,上每台机器上查看日志比较麻烦,用Flume,Logstash.ElasticSearch.Kibana等分布式日志管理系统又显得大材小用,所以想 ...
- Java中的Object、T（泛型）、?区别
因为最近重新看了泛型,又看了些反射,导致我对Object.T(以下代指泛型).?产生了疑惑. 我们先来试着理解一下Object类,学习Java的应该都知道Object是所有类的父类,注意:那么这就意味 ...
- 写给Android App开发人员看的Android底层知识（3）
(七)App启动流程第2篇 书接上文,App启动一共有七个阶段,上篇文章篇幅所限,我们只看了第一阶段,接下来讲剩余的六个阶段,仍然是拿斗鱼App举例子. 简单回顾一下第一阶段的流程,就是Launche ...
- 前端工程之npm
package.json是npm package的配置文件,存储当前项目相关的信息.如果下载npm中的包,包内会自带该文件.具体有如下属性: { "name" : "un ...
- Ultimus BPM 通信和运营商行业应用解决方案
Ultimus BPM 通信和运营商行业应用解决方案 行业应用需求 电信运营商的主要职能是维护庞大的通信网络和向电信用户提供固话通讯.手机通讯.数据通讯及相关的附加增值服务,其组织特点是工种多.分工细 ...
- 解决selenium驱动Firefox跳转页慢慢慢的问题
首先我给自己定义为是一个更新偏执狂.不知道从哪个版本开始,使用selenium驱动打开Firefox浏览器时,会跳转到官网指定页,这个过程真是慢得要死. 为了解决这个问题,我是查了很多资料,解决方案是 ...
- Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)
任务四:定位和居中问题 任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和 ...
- Docker 镜像小结 - 每天5分钟玩转 Docker 容器技术（21）
本节我们对 Docker 镜像做个小结. 这一部分我们首先讨论了镜像的分层结构,然后学习了如何构建镜像,最后实践使用 Docker Hub 和本地 registry. 下面是镜像的常用操作子命令: i ...
- 初码-Azure系列-如何在控制面板中选择中文版操作系统
之前在文章<初码-Azure系列-记一次从阿里云到Azure的迁移和部署>中说到,默认的Windows Server 2016操作系统是英文版,后来摸索出中文版的方法,如下:
- C语言之变量和数据类型
常量:程序在运行过程中无法对值进行更改. 变量:是在计算机内存空间一种表示,声明变量将会向计算机内存申请存储空间,用于保存数据,计算机的CPU会从内存中加载数据. 声明变量: 数据类型 变量名[=值 ...