HTML5新增

HTML5 基础

---

input：

placeholder：输入框提示

type里面新增加的类型：（有兼容性问题，不推荐使用）

• date:可以选择日期（兼容性不好）;
• time:时间；week：星期；
• datetime-local:可以选择日期时间；
• number：只能填写数字 color：填颜色。

其他：

contenteditable="true" ：可修改元素的内容（可以继承）（没有兼容性问题）

draggable = "true" :元素可拖拽（大部分元素默认为false，其中a标签img标签默认为true） （只有Chrome和Safari支持）

拖拽周期：推拽开始，拖拽进行时，拖拽结束

拖拽对象触发事件：

• 拖拽开始（dragstart）,按下物体的瞬间不会触发事件，必须移动
• 拖拽移动事件（drag）,移动的时候触发
• 拖拽结束时间（dragend），结束时间

拖拽目标触发事件：

• dragenter：当拖拽进入目标区域时，不是元素图形进入触发，而是拖拽的鼠标进入才会触发
• dragover：在拖拽目标的范围内移动触发(想要阻止元素回到默认位置，必须在这设置阻止默认事件)
• dragleave：离开拖拽目标触发
• dragdrop: 必须在dragover事件下阻止默认事件才会触发（e.preventDefault()）

拖拽的时候元素会脱离文档结构，放回去的时候在恢复。

dataTransfer.effectAllowed:可以改变拖拽时指针的样式（必须写在draggstart里，兼容性不行)

e.dataTransfer.effectAllowed = 样式

dataTransfer.dropEffect:可以改变拖拽松手时指针的样式（必须写在drop里，兼容性不行）

e.dataTransfer.dropEffect = 样式

canvas：

canvas要在js中开始操作画图。
canvas设置画板的大小需要在行间设置

canvas中画笔方法：

: 生成一个画笔

```moveTo（x,y）```:画笔开始的的位置  
```lineTo（x,y）```：下一笔要到的地方  
```lineWidth```：设置画笔画出来线条的宽度（每个画笔画出来的图形苦读一样）  
```beginPath``` ：开启一个新的路径  
```closePath``` ：自动闭合所画的图形（闭合当前这一个路径）  
```stroke``` ： 将画笔的轨迹写到画板上（即展示画的图形）  
```fill``` : 将图形的内容区填满（会自动闭合图形）  
```clearRect（起始X，起始Y，矩形的宽，矩形的高）```:清除这个矩形框的内容（相当于橡皮擦）

### canvas画矩形：
1. 一笔一笔的画
2. rect（起始X，起始Y，矩形的宽，矩形的高）:一个矩形
3. strokeRect(起始X，起始Y，矩形的宽，矩形的高):一个只有边框的矩形
4. fillRect（起始X，起始Y，矩形的宽，矩形的高）：有填充内容的矩形

### canvas画圆形，圆弧：

参数：圆心（x,y），半径(r)，弧度（开始弧度start，结束弧度end，必须以π（Math.PI）为单位 例 Math.PI* 2 : 360度），方向（顺时针，逆时针，顺时针写为0，逆时针为1）

arc（x,y,r,开始弧度,结束弧度,方向）：方法

### canvas画圆角矩形：

#### 画一条带弧的线：
参数：线直线部分的结束坐标（x,y），线的结束部分弧的方向（需填写一个坐标表示延伸方向，只提供方向参考），圆弧的大小

arcTo（x,y，弧所延伸方向的坐标，圆弧的大小）：画出一条线

**注意**：四条线就可画出圆角矩形，画笔的起始位置应该为矩形的弧形大小预留出一定的位置
```javascript
        //画一个弧度为10px 起始位置位（100 100），宽高为100的圆角矩形
        ctx.moveTo(100, 110);
        ctx.arcTo(100, 200, 200, 200, 10);
        ctx.arcTo(200, 200, 200, 100, 10);
        ctx.arcTo(200, 100, 100, 100, 10);
        ctx.arcTo(100, 100, 100, 200, 10);
        ctx.stroke();

贝塞尔曲线：

二次贝塞尔曲线需提供三个点，做出两条辅助线
三次需要四个点，三条辅助线，
其他类推（第一个点为画笔的起始点）

quadraticCurveTo（第二个点横坐标，第二个点纵坐标，第三个点横坐标，第三个点纵坐标）：二次贝塞尔曲线

bezierCurveTo(第二个点横坐标，第二个点纵坐标，第三个点横坐标，第三个点纵坐标,第四个点横坐标，第四个点纵坐标)：三次贝塞尔曲线

变换：

translate（x,y）:画布的坐标系原点（对全局都有作用）
rotate(角度):所画图形的旋转角度（必须以π为单位），旋转中心为坐标系原点（对全局都有作用。
scale（x轴方向，y轴方向）：缩放图形，图形的每一个坐标点都乘以了相应的系数（对全局都有作用）
解决消除对全局的影响：再开始时调用save方法（），在对某一部分调用完rotate和translate方法后再次调用restore方法就可以将后面部分恢复为默认的。

canvas改变样式：

fillstyle：改变填充的颜色，
可以添加图片（图片从坐标原点开始渲染）

        var img = new Image();
        img.src = "../images/1.jpeg"
        img.onload = function() {
            ctx.beginPath();
            var bg = ctx.createPattern(img, 'no-repeat')
            ctx.fillStyle = bg;
            ctx.fillRect(0, 0, 100, 100)
        }

添加渐变 参考

阴影：（默认是边框的里外都有）

• shadowColor:添加阴影颜色
• shadowBlur：添加阴影的大小
• shadowOffsetX：阴影水平方向平移
• shadowOffsetY：阴影垂直方向平移

线段样式（在线的两端添加样式）：

• lineCap属性：在两端加一个图形，为扩大线段的长度（值为round表示加一个半圆，）
• lineJoin属性：两个线相交时的样式

canvas绘制文字：

strokeText（文字，开始横坐标，开始纵坐标）：文字描边（空心字体）

fillText（文字，开始横坐标，开始纵坐标）：文字填充，（实心字体）可以用fillstyle改变字体颜色

svg:

svg适合矢量图，放大不会失真，适合大面积的贴图，通常动画较简单（标签和CSS绘画）
canvas适合用于小面积的绘图，适合动画（JS去画）

画直线：

在SVG标签里使用line标签有四个属性x1,y1,x2,y2分别代表开始位置坐标和结束位置坐标，画完之后要在css中为他们设置stroke属性

画矩形：

在SVG里用标签rect标签，属性width，height，x,y,rx,ry,分别表示矩形的宽，高，起始位置的横纵坐标，圆角的宽高

画圆：

在SVG里用标签circle

画椭圆：

在SVG里用ellipse标签

画折线：

在SVG里用polyline标签，默认闭合
解决默认填充的可以在css中将fill值改为transparent