《html5初识》

属性

placeholder 提示信息

<inputtype="text"placeholder="密码">

input新增type *

Calendar 时间类

在form表单中才能发挥作用

1. 选择年月日

<inputtype="date">

<!--chrome支持  Safari不支持 IE部分版本不支持 -->

1. 选择时间

<inputtype="time">

1. 选择年月日和时间

<inputtype="datetime-local">

1. 选择周数

<inputtype="week">

contenteditable内容可编辑

加上后内容可以编辑了

<divcontenteditable="true">adf</div>

draggable拖拽

1. 不是直接拖拽元素 是拖拽后有一个阴影
   
2. 拖拽的生命周期

• 拖拽开始 拖拽进行  拖拽结束
  

3. 所有标签元素，当拖拽周期结束时，默认事件是回到原处
   

<divclass="tuo"draggable="true"></div>

<!--IE谷歌 safari兼容 火狐部分不兼容-->

可以配合拖拽事件使用

//拖拽时按下的事件

odiv.ondragstart=function (e) {

   console.log(e)

}

//拖拽移动的事件

odiv.ondrag=function (e) {

   console.log(e)

}

//拖拽结束的事件

odiv.ondragend=function (e) {

   console.log(e)

}

drag目标元素--拖拽进入

1. 进入事件 拖拽元素的鼠标进入odiv中触发

odiv.ondragstart=function (e) {}

1. 拖拽元素进入到odiv中 不停触发事件

odiv.ondragover=function (e) {

   //阻止默认事件

   e.preventDefault()

}

canvas画板

创建画板

画布的大小是行间属性width height ，不是css样式中的大小

<canvasid="can"width="500px"height="300px"></canvas>

基础方法

使用画布需要在js中

//获取元素

varcanvas=document.getElementById("can");

• var ctx = canvas.getContext("2d"); getContext内容区域 相当于画笔
  
• ctx.moveTo(100,100); 画笔的起点  路径
  
• ctx.lineTo(200,100)画笔的线 从上一个点到这个点 路径
  
• ctx.stroke();把规划的路径渲染道浏览器中
  
• ctx.closePath()闭合 线回到起点

• 只针对一个路径 新的路径不行
  

• ctx.fill() 填充
  
• ctx.lineWidth=10; 设置线条的粗细

• 把同一个路径的都会设置成一样的粗细
  

• ctx.beginPath() 重新开始一个路径