zoukankan      html  css  js  c++  java
  • H5拖拽和canvas、存储

    1、拖拽三个方法:

      首先需要设置元素:dragable = true;
    
      开始拖拽:
      ondragstar="start(event)";
    
     function start(event){
            event.dataTransfer.setData('a',event.target.id) 
      }   a存放id。
    
      拖拽中
      ondrop="drop(event)";
      function drop (event){
         event.preventDefault();
         var data =  event.dataTransfer.getData('a');
         document.getElementById('xx').appendChild(document.getElementById(data));    获取元素并将拖拽的东西加入到元素中去
      }
    
      结束拖拽
      ondragover="over(over)";
      function over (event){
            event.preventDefault();
      }
    

    2、canvas

       三部曲:1、设置宽高边框 2、获取元素、告诉浏览器用什么方式选   var ctx = c.getContext('2d'); 3、画图
      
      1、画矩形
      ctx.fillStyle='red';  
      ctx.fillRect(300,300,150,50); x,y,w,h
      
      2、画直线
       ctx.moveTo(x1,y1);
       ctx.lineTo(x2.y2);
       ctx.stroke();
    
      3、画圆
      ctx.beginPath();
      ctx.arc(x,y,r,开始位置,结束位置,方向)
      ctx.stroke();
      ctx.closePath();
    

      4、画文本
      ctx.font = '30px Arial';
      ctx.fillText('HELLO',x,y);
    
      5、渐变色
            1、线条渐变  createLinearGradient(x1,y1,x2,y2);
            2、径向/圆渐变 createRadialGradient(x1,y1,r1,x2,y2,r2)
      
      var grad = ctx.createRadialGradient(300,300,100,300,300,180);
      grad.addColorStop('0','yellow');
      grad.addColorStop('0.3','blue');
      grad.addColorStop('0.6','orange');
      grad.addColorStop('1','red');
      ctx.fillStyle = grad;
      ctx.fill();
      ctx.stroke();
      
    
      6、画八卦
    

    3、存储

      1、localStorage 
            特点:永久存储,除非自己手动删除
      2、sessionStorage
            特点:不会永久保存,关闭浏览器数据就会消失。
      方法:保存数据:localStorage.settItem(key,value);
            读取数据:localStorage.getItem(key);
            删除单个数据:localStorage.removeItem(key);
            删除所有数据:localStorage.clear();
            得到某个索引的key:localstorage.key(index);
  • 相关阅读:
    最新pear安装
    php垃圾收集机制
    strstr的实现
    PHP 快速生成目录树
    php 去掉字符串
    php批量生成mysql触发器定义语句
    HTML的知识点讲解(HTML版本)
    mysql数据库怎么使用,mysql的使用方法
    sublime text3Emmet:HTML/CSS代码快速编写神器
    图片滚动插件jquery bxslider
  • 原文地址:https://www.cnblogs.com/qianqiang0703/p/13526076.html
Copyright © 2011-2022 走看看