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>