H5（02）

H5的一些新增属性
// 让元素可编辑
< div contenteditable=“true” >div中的文字
//改属性可以继承，同时子标签也可以自定义覆盖继承而来的属性
//此时的false不可编辑
< span contenteditable = “false”>hi< /span >
< /div >

//autocomplete 设置表单成功提交过的数据，下一次有提示 ,一般会关闭这个功能
< form action="#" method=“get” autocomplete=“off” >
//占位符 ,做提示信息使用,也就是平常登陆注册界面中输入框里的提示文字例如“请输入账号”
< input placeholder=“请输入账号” autofocus >

//type属性值

//天
< input type=“date” >
//时间
< input type=“time” >
//星期
< input type=“week” >
//本地时间
< input type=“datetime-local” >

//在客户端没有任何区别 在手机上自动的切换到数字
< input type=“tel” name=“tel”>

//提交页面的按钮

表单的验证
< form action="" method=“get”>
//required boolean属性 必须的
< input type=“text” name=“uname” required maxlength=“9” minlength=“3” min= “” step=“1”>
//pattern 正则 可以省略 ^ $
< input type=“tel” name=“utel” pattern=“1[3578]\d{9}”>
//是否允许多个输入值 使用逗号分隔
< input type=“email” multiple name=“email”>
//image可以作为提交按钮来使用
< input type=“image” src=“imgs/login.png” alt=“Submit” width=“100” height=“100”>

< /form>

拖拽
//chrome Safari 正常使用，Firefox部分浏览器支持
< div class=“draggable-box” draggable = “true” >< /div>
//也有一些标签是默认可以拖拽的
< a href="#"> A < /a>
< img src="" alt="">

//拖拽的生命周期
1、拖拽开始
2、拖拽进行中
3、拖拽结束
//拖拽的组成
1、被拖拽的物体
2、目标区域

Canvas绘图
//用于绘图的行内块标签，默认的宽高300*150
< canvas width=“600” height=“400” id=“can”>
您的浏览器不支持Canvas标签！
< /canvas>
//获取画布
var canvas = document.getElementById(‘can’);
// 获取画笔 获得绘图上下文 content内容 context上下文
var ctx = canvas.getContext(‘2d’);
console.dir(ctx);
//其中x，y为坐标 w，h为矩形的宽高
var x=0,y=0,w=100,h=80;
ctx.fillRect(x,y,w,h);// 在左上角填充一个矩形rectangle
// 设置描边的宽度 开始绘制之前设置宽度
ctx.lineWidth = 10;
//描边
.stroke

.arc()//绘制拱形路径
.ellipse()//绘制椭圆
.besierCurveTo //绘制贝塞尔曲线
.stroke()//描边