HTML5-画图、拖拽、web存储

<ul>li{第*项}*6回车</ul>
会产生六行li标签，内容第1-6项

知识点一：拖拽效果

<div id="box" ondrop="drop(event)" ondragover ='over(event)'></div>
    <img src="./images/logo.png" alt="" draggable="true" ondragstart="start(event)" id="img1">
// 开始拖拽
 function start(event){
        // dataTransfer.setData    设置属性    
        console.log(event)
        // 相当于设置一个属性a用来存储img的id值。目的：方便再放下的时候可以知道放下的是谁
        event.dataTransfer.setData('a',event.target.id)
        // console.log(event.target.id)  //img1
        // console.log(this.id)
        // console.log(this)
    }
    
    // 准备放下
    function drop(event){
        event.preventDefault();//阻止事件的默认行为
       var data =  event.dataTransfer.getData('a')
        console.log(event.dataTransfer.getData('a'))
        document.getElementById('box').appendChild(document.getElementById(data))
    }

    // 已经放下
    function over(event){
        event.preventDefault();
    }

知识点二: 画图

<canvas></canvas> 只是个标签 可以有属性width height style

矩形：

ctx.fillStyle="red";//边框填充

ctx.fill();

ctx.fillRect(0,0,150,150);

 

线条：ctx.moveTo(0,0); //起始点

ctx.lineTo(15,15); //结束终点

ctx.stroke(); //画线方法 加上后线就出现了

ctx.strokeStyle="颜色"；//边框填充

 

画圆：

ctx.beginPath(); //开始画圆

ctx.arc(x,y,半径，起始位置*Math.PI，结束位置*Math.PI,false);//默认值是false，表示顺时针，可以不填。。true是逆时针

ctx.stroke(); //开始画线 这是边的框线

ctx.fillStyle="颜色"；

ctx.fill();//配合fillStyle使用

ctx.strokeStyle="颜色"；

 

文本：

ctx.font="30px Arial"; //这是文本的格式 第一个是文本大小 第二个是文本的样式字体

ctx.fillStyle="red"; //字体的颜色

ctx.fillText("文本"，x，y) //这是实心文本内容

ctx.strokeText(text,x,y); //这是空心的文本内容

 

线性渐变：

 ctx=c.getContext("2d")； //告诉浏览器要开始写2d效果了

//创建渐变

var grad= ctx.createLinearGradient(x,y,200,0)； // 第一个x轴位置 第二个Y轴位置 第三个

grad.addColorStop(0,"颜色")；//

grd.addColorStop(0,"red");//步数 第二个数颜色
grd.addColorStop(1,"white"); //同上

ctx.fillStyle=grad; //把这个对象赋给画的style属性
ctx.fillRect(10,10,150,80);

径向渐变：

var grad=ctx.createRadialGradient(x,y,r,x,y,r); //前一个圆是内圆 x轴坐标 y轴坐标 半径 后一个是外圆 x轴位置 y轴位置 半径

ctx.fillStyle=grad;

配合ctx.fillStyle=""; ctx.fill(); ctx.strokeStyle=""; 使用

web存储： 共三种

localStorage 对象

    // localstorage 使用  特点:会永久保存，除非手动删除

    // 设置数据

    localStorage.setItem('count',5)

    console.log(localStorage.getItem('count'))

    // localStorage.removeItem('count')

    console.log(localStorage.getItem('count')) //null

    // localStorage.clear()

sessionStorage 对象

    //sessionStorage 使用  特点：浏览器关闭自动消失
    //得把赋值这行删除，否则运行就会赋值
    // sessionStorage.setItem('count',15)
    // console.log(sessionStorage.getItem('count'))// 获取属性名为count元素属性值
    // sessionStorage.removeItem('count')  //移除属性名为count元素属性值
    // console.log(sessionStorage.getItem('count')) //null
    // sessionStorage.clear() //把所有的值都清空